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


Posted in Javascript onAugust 05, 2020

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

这代码怎么粘上来这么丑

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

vant 自定义 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

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

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

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

3.data和methods部分

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

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

Javascript 相关文章推荐
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
javascript设计模式之迭代器模式
Jan 30 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 #Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 #Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 #Javascript
vue 限制input只能输入正数的操作
Aug 05 #Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 #Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 #Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 #Javascript
You might like
php Calender(日历)代码分享
2014/01/03 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
javascript回调函数详解
2018/02/06 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
医科大学生的自我评价
2013/12/04 职场文书
竞争上岗实施方案
2014/03/21 职场文书
战略合作意向书范本
2014/04/01 职场文书
小学生操行评语大全
2014/04/22 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
标准版离职证明书
2014/09/12 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
运动会报道稿大全
2015/07/23 职场文书
导游词之无锡唐城
2019/12/12 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
通过Python把学姐照片做成拼图游戏
2022/02/15 Python