随后记： uniapp uview u-dropdown 下拉菜单固定高度滑动不生效

peachSoda72024-06-03 11:36

使用u-dropdown 下拉组件按照uview官网讲解使用配置根本不生效

复制代码

scroll-y="true" style="height: 200rpx;"

但是在下拉的时候，不能上下滑动，原因是自带的遮罩层挡住了

解决办法：在下拉菜单打开和关闭的时候，分别处理显示和隐藏遮罩层，并且单独给item高度

请参考：

重点：u-dropdown-item 单独给height 添加打开关闭事件，处理遮罩层显示影响，添加穿透样式

复制代码

				<u-dropdown class="dropdown" :class="{'dis-none': !dropdownOpen}" @open="openDrops" @close="closeDrops">
					<u-dropdown-item height='400' v-model="selectFollow" :title="title" :options="optionsList" @change="changeSelectFollow"></u-dropdown-item>
					<u-dropdown-item height='400' v-model="selectStatus" :title="statusTitle" :options="statusList" @change="changeSelectStatus"></u-dropdown-item>
				</u-dropdown>


		openDrops(e) {
			this.dropdownOpen = true;
		},
		// 关闭筛选下拉
		closeDrops(e) {
			this.dropdownOpen = false;
		},

	.dis-none{
		::v-deep .u-dropdown__content{
			display: none;
		}
	}