0
点赞
收藏
分享

微信扫一扫

uni-app 实现picker多选

Gascognya 2023-09-10 阅读 35

<u-popup :show="showA" mode="bottom" round="32">
			<view class="popupA">
				<view class="popupA_one">
					<view class="one_txt" style="color: royalblue;margin-left: 32rpx;" @click="cancelone()">取消</view>
					<view class="one_txt" style="color: limegreen;margin-right: 32rpx;" @click="btnone()">确定</view>
				</view>
				<!-- tasteGroupId -->
				<scroll-view class="viewscroll" style="height: 480rpx;width: 100%;margin-top: 12rpx;" scroll-y="true">
					<view class="baseone"
						:style="item.disabled?'background-color: #ffffff;':'background-color: #e4e7ed;'"
						:disabled="item.disabled" v-for="item,index in tasteList" @click="clickItem(index)">
						<view style="height: 32rpx;width: 32rpx;"></view>
						<view class="txt">{{item.tasteGroupName}}</view>
						<view
							style="margin-right: 32rpx;color: royalblue;font-size: 32rpx;font-weight: 500;width: 32rpx;"
							v-if="item.disabled">√</view>
						<view
							style="margin-right: 32rpx;color: royalblue;font-size: 32rpx;font-weight: 500;width: 32rpx;"
							v-else></view>
					</view>
				</scroll-view>
			</view>

		</u-popup>

js部分

gettasteGroupList() {

				tasteGroupList().then(res => {
					if (res.data.length > 0) {
						res.data.forEach(el => {
							el.disabled = false;
							el.checked = false;
						})
					}
					// console.log("1111");
					this.tasteList = res.data;
					// 调用请求商品详情数据的方法
					if (this.goods.goodsId != null) {
						this.getGoodsDetail(this.goods.goodsId)
					}
				})
			},

css 部分

.popupA {
		width: 100%;
		background-color: #e4e7ed;
		height: 600rpx;

		.popupA_one {
			width: 100%;
			height: 96rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #ffffff;
			font-size: 32rpx;
			font-weight: 400;
		}

		.viewscroll {
			.baseone {
				width: 100%;
				height: 96rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.txt {
					font-size: 32rpx;
					font-weight: 400;
				}
			}

		}
	}

举报

相关推荐

0 条评论