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 相关文章推荐
javascript document.images实例
May 27 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
layui type2 通过url给iframe子页面传值的例子
Sep 06 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
Nuxt的路由动画效果案例
Nov 06 Javascript
Java 生成随机字符的示例代码
Jan 13 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
php不用正则验证真假身份证
2013/11/06 PHP
dedecms中使用php语句指南
2014/11/13 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
php数组和链表的区别总结
2019/09/20 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
JS常见算法详解
2017/02/28 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python将字典内容存入mysql实例代码
2018/01/18 Python
python3爬虫怎样构建请求header
2018/12/23 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
信仰心得体会
2014/09/05 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python