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

更新时间：2020年08月05日 11:14:54 作者：会飞的小蚂蚱

这篇文章主要介绍了vant 自定义 van-dropdown-item的用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

我们还是这个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;
					}
				}
			}
		}
	}

补充知识：记录-vant实现select下拉框

记录-vant没有直接提供传统的select下拉框，我的意思是，单行单元格然后点击出现下拉框，样式和其他input统一。

1.需求 input focus下出现下拉框，选中选项后值绑定给field

2.html部分圆圈处是控制底部抽屉是否显示

3.data和methods部分

以上这篇vant 自定义 van-dropdown-item的用法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue新一代状态管理工具Pinia的具体使用
本文主要介绍了Vue新一代状态管理工具Pinia的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
详解vue-cli 接口代理配置
本篇主要介绍了vue-cli 接口代理配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
Vue核心概念Action的总结
今天小编就为大家分享一篇关于Vue核心概念Action的总结，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
Vue将props值实时传递并可修改的操作
这篇文章主要介绍了Vue将props值实时传递并可修改的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue实现绑定事件的方法实例代码详解
这篇文章主要介绍了vue实现绑定事件的方法实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06
Vue中的生命周期详细解读
这篇文章主要介绍了Vue中的生命周期详细解读,每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM,需要的朋友可以参考下
2023-08-08
深入浅析Vue中的 computed 和 watch
computed 计算属性是通过属性计算得来的属性，watch属性变化，就会触发监听的函数。下面通过本文给大家介绍Vue中的 computed 和 watch，感兴趣的朋友一起看看吧
2018-06-06
vue.js el-tooltip根据文字长度控制是否提示toolTip问题
这篇文章主要介绍了vue.js el-tooltip根据文字长度控制是否提示toolTip问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
vue+SSM实现验证码功能
这篇文章主要介绍了vue+SSM实现验证码功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-12-12
vue之使用echarts图表setOption多次很卡问题及解决
这篇文章主要介绍了vue之使用echarts图表setOption多次很卡问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07