uView组件u-sticky吸顶和u-dropdown使用导致页面无法滚动问题及解决 页面无法滚动问题解决
问题由于u-dropdown中代码遮罩层层级问题导致的
解决方案
在u-dropdown外包裹一层view，在触发吸顶函数使u-dropdown超出部分隐藏，触发u-dropdown的open函数在展开close函数关闭
以下是代码实现
html
<u-sticky @fixed="fixed()"> <view :style="dropdownShow==false?'position: relative;overflow: hidden;':''" style=""> <u-dropdown v-if="isDropShow" @open="dropOpen" @close="dropClose" ref="uDropdown" activeColor="orange" class="top"> <u-dropdown-item activeColor="orange" class="menu-item" @change="select" v-model="value1" title="全部" </u-dropdown-item> <u-dropdown-item class="menu-item" @change="goEnroll" v-model="value2" title="排序" <u-dropdown-item class="menu-item" @change="goEnroll" v-model="value2" title="筛选" :options="options6"> </u-dropdown-item> </u-dropdown> </view> </u-sticky>
javascript
<u-sticky @fixed="fixed()"> <view :style="dropdownShow==false?'position: relative;overflow: hidden;':''" style=""> <u-dropdown v-if="isDropShow" @open="dropOpen" @close="dropClose" ref="uDropdown" activeColor="orange" class="top"> <u-dropdown-item activeColor="orange" class="menu-item" @change="select" v-model="value1" title="全部" </u-dropdown-item> <u-dropdown-item class="menu-item" @change="goEnroll" v-model="value2" title="排序" <u-dropdown-item class="menu-item" @change="goEnroll" v-model="value2" title="筛选" :options="options6"> </u-dropdown-item> </u-dropdown> </view> </u-sticky> <script> export default { data() { return { dropdownShow:false, isDropShow:true } }, components:{wSelect}, methods: { fixed() { this.isDropShow = false this.$nextTick(() => { this.isDropShow = true }) }, dropOpen() { this.dropdownShow = false this.$nextTick(() => { this.dropdownShow = true }) }, dropClose() { this.dropdownShow = false this.$nextTick(() => { this.dropdownShow = false }) } } } </script>
