u-sticky吸顶和u-dropdown使用导致页面无法滚动问题及解决 页面无法滚动问题解决

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>