vant 自定义 van-dropdown-item的用法

Z时代
2024-01-10
分类：IT

我们还是这个item 我们要在里面加东西这可咋整


<van-dropdown-item class='x3' title="选择地点">
<view class="choice">
 <view class="choice_top">
 请选择
 <view class="over">
 x
 </view>
 </view>
 <view class="choice_middle">
 <view>xxxxx</view>
 <view>xxxxx</view>
 <view>xxxxx</view>
 <view>xxxxx</view>
 <view>xxxxx</view>
 <view>xxxxx</view>
 <view>xxxxx</view>
 <view>xxxxx</view>
 <view>xxxxx</view>
 <view>xxxxx</view>
 <view>xxxxx</view>
 <view>xxxxx</view>
 <view>xxxxx</view>
 <view>xxxxx</view>
 <view>xxxxx</view>
 </view>
 <view class="choice_bottom">
 <view class="choice_we">
<view class="choice_we_left">确定</view>
<view class="choice_we_right">取消</view>
 </view>
 </view>
</view>
 </van-dropdown-item>

这代码怎么粘上来这么丑

我们要这个效果中间可以自由滚动上下固定

我们直接给最外层的一个弹性盒加换轴方向中间给 overflow-x：hidden； flex：1


.choice {
			width: 434rpx;
			height: 634rpx;
			display: flex;
			flex-direction: column;
			.choice_top {
				width: 100%;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				color: rgb(83, 83, 83);
				position: relative;
				.over {
					color: rgb(203, 203, 203);
					position: absolute;
					right: 15rpx;
					top: 0;
					width: 50rpx;
					height: 50rpx;
				}
			}
			.choice_middle {
				overflow-x: hidden;
				flex: 1;
				text-align: center;
			}
			.choice_bottom {
				width: 100%;
				height: 100rpx;
				.choice_we {
					width: 300rpx;
					height: 63rpx;
					margin-left: 63rpx;
					margin-top: 35rpx;
					.choice_we_left {
						float: left;
						height: 63rpx;
						width: 50%;
						text-align: center;
						line-height: 63rpx;
						font-size: 30rpx;
						color: #fff;
						background-color: rgb(156, 156, 156);
						border-top-left-radius: 30rpx;
						border-bottom-left-radius: 30rpx;
					}
					.choice_we_right {
						float: left;
						height: 63rpx;
						width: 50%;
						text-align: center;
						line-height: 63rpx;
						font-size: 30rpx;
						color: #fff;
						background-color: rgb(170, 191, 178);
						border-top-right-radius: 30rpx;
						border-bottom-right-radius: 30rpx;
					}
				}
			}
		}
	}