700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > uView下拉菜单组件u-dropdown设置高度并防止滑动穿透

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

时间:2018-08-27 06:24:22

相关推荐

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

一、出现的问题:

u-dropdown内容自定义时设置高度,滑动时会带动父级,真机滑动会出现问题

这时就需要处理两个问题:

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

二、解决办法:

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>

大功告成!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。