uView下拉菜单组件u-dropdown设置高度并防止滑动穿透

一、出现的问题:
u-dropdown内容自定义时设置高度,滑动时会带动父级,真机滑动会出现问题
这时就需要处理两个问题:

  1. 定义内容时设置高度并设置可滑动,可以配合scroll-view组件使用
  2. 处理真机滑动出现问题的情况(防止滑动穿透)

二、解决办法:
1、定义内容时设置高度并设置可滑动,可以配合scroll-view组件使用
如下代码里的scroll-view组件,主要代码:

<scroll-view scroll-y="true" style="height: 80vh;">

2、处理真机滑动出现问题的情况(防止滑动穿透)
如下代码里的@touchmove.stop.prevent,防止滑动穿透,方法里置空即可,主要代码:

@touchmove.stop.prevent="() => {}"

但此时发现滑动完下拉菜单后,如果父级高度超过屏幕高度,则会继续往上滑,用户体验极差,这时需要手动在总父级上加个样式,监听u-dropdown的下拉状态,控制是否加此样式:

.layer-hidden{
  height: 100vh;
  overflow: hidden;
}

具体代码如下:

<template>
<view class="open-door-list" :class="layerHidden ? 'layer-hidden' : ''">
   <view class="dropdown-style">
      <u-dropdown ref="uDropdown" class="key-dropdown" @open="handleOpen" @close="handleClose">
        <u-dropdown-item :title="currentDrop3">
          <view class="slot-content" style="background-color: #FFFFFF;">
            <scroll-view scroll-y="true" style="height: 80vh;" class="u-text-center u-content-color" @touchmove.stop.prevent="() => {}">
              <u-cell-group>
                <u-cell-item v-for="(item,index) in selectData3" :key="index" :title="item.name" :arrow="false" @click="changeAccountData3(item)">
                  <u-icon name="checkbox-mark" color="#0796FF" v-if="item.checked"></u-icon>
                </u-cell-item>
              </u-cell-group>
            </scroll-view>
          </view>
        </u-dropdown-item> 
      </u-dropdown>
   </view> 
</view> 
</template>
<script>
export default {
  data() {
    return {  
      layerHidden: false
    }
  },   
  methods: {
    handleOpen(index) {
      this.layerHidden = true;
    },
    handleClose(index) {
      this.layerHidden = false;
    }, 
  }
}
</script>  
<style lang="scss">
.layer-hidden{
  height: 100vh;
  overflow: hidden;
}
</style>

大功告成!

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值