vant在自定义的 van-dropdown-item
发布日期:2021-09-29 12:54:38 浏览次数:0 分类:技术文章

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

 

上一篇:uni里面怎么把轮播图的图片替换?
下一篇:自定义样式的一个小技巧 萌新不看就是亏啦

关于作者

    白红宇是个全栈工程师,前端vue,小程序,app开发到后端框架设计,数据库设计,环境部署上线运维。

最新文章

echarts地图标注红旗_2019款红旗HS5日常实用性测试报告 2021-09-14
ccf a类期刊_高瓴人工智能学院2篇论文被CCFA类会议AAAI(2020)接收 2021-09-14
matlab toolbox下载_MIMIC数据库中数据的下载以及MATLAB读取 2021-09-14
controller调用controller的方法_SpringCloud服务间调用 2021-09-14
磁盘分区形式mbr和gpt哪个好_夜大和成人高考一样吗?成人高考和夜大哪个好? 2021-09-14
printf输出字符串_Rob Pike 带你重新认识字符串、字节、rune和字符 2021-09-14
asp.net pdf如何转换成tif_办公小技巧:如何将PDF转换成图片?搞定PDF格式转换,就用这招就够了... 2021-09-14
音频电平vu显示表软件下载_制作的喜马拉雅FM音频有噪音怎么办?众里寻他千百度,终于有了完美解决方案... 2021-09-14
word 代码块_还在忍受Word?比Word好用多的免费写作软件 2021-09-14
不知道工作组名称怎样加入_不知道字体名称?不要紧,字体识别网站帮助你 2021-09-14
查看csv文件编码格式_生信分析过程中这些常见文件的格式以及查看方式你都知道吗?... 2021-09-14
uml图中的各种箭头_产品经理必看:常用的UML建模详解 2021-09-14
打包的时候不把配置文件加进去_修改UE4 打包后的自定义用户配置 2021-09-14
等待线程3秒返回结果_Python基础教程:进程和线程(上) 2021-09-14
systemctl start named失败的解决方法_anaconda安装失败解决方法 2021-09-14
sql server数据一对多合并_你真的会写一对多分页SQL吗 2021-09-14
python字符串相似度去重_Python 字符串相似性的几种度量方法 2021-09-14
python 回归方程及回归系数的显著性检验_回归方程及回归系数的显著性检验 2021-09-14
gis可达性分析步骤_【极简】城乡规划新技术GIS应用厦大李渊(1) 2021-09-14
将一个无效参数传递给了将无效参数视为严重错误的函数_JavaScrip函数式编程原理简介... 2021-09-14