快捷導(dǎo)航

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

更新時間：2020年08月05日 11:14:54 作者：會飛的小螞蚱

這篇文章主要介紹了vant 自定義 van-dropdown-item的用法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

我們還是這個item 我們要在里面加?xùn)|西這可咋整

<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;
					}
				}
			}
		}
	}

補充知識：記錄-vant實現(xiàn)select下拉框

記錄-vant沒有直接提供傳統(tǒng)的select下拉框，我的意思是，單行單元格然后點擊出現(xiàn)下拉框，樣式和其他input統(tǒng)一。

1.需求 input focus下出現(xiàn)下拉框，選中選項后值綁定給field