vant 自定义 van-dropdown-item的用法
网络编程 2021-07-04 14:06www.168986.cn编程入门
这篇文章主要介绍了vant 自定义 van-dropdown-item的用法,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
我们还是这个item 我们要在里面加东西 这可咋整
<van-dropdown-item class='x3' title="选择地点"> <view class="choice"> <view class="choice_"> 请选择 <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-xhidden; flex1
.choice { width: 434rpx; height: 634rpx; display: flex; flex-direction: column; .choice_ { 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; : 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-: 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--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--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的用法就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程