服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - vant 自定义 van-dropdown-item的用法

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

2021-08-06 16:53会飞的小蚂蚱 JavaScript

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

我们还是这个item 我们要在里面加东西 这可咋整

  1. <van-dropdown-item class='x3' title="选择地点">
  2. <view class="choice">
  3. <view class="choice_top">
  4. 请选择
  5. <view class="over">
  6. x
  7. </view>
  8. </view>
  9. <view class="choice_middle">
  10. <view>xxxxx</view>
  11. <view>xxxxx</view>
  12. <view>xxxxx</view>
  13. <view>xxxxx</view>
  14. <view>xxxxx</view>
  15. <view>xxxxx</view>
  16. <view>xxxxx</view>
  17. <view>xxxxx</view>
  18. <view>xxxxx</view>
  19. <view>xxxxx</view>
  20. <view>xxxxx</view>
  21. <view>xxxxx</view>
  22. <view>xxxxx</view>
  23. <view>xxxxx</view>
  24. <view>xxxxx</view>
  25. </view>
  26. <view class="choice_bottom">
  27. <view class="choice_we">
  28. <view class="choice_we_left">确定</view>
  29. <view class="choice_we_right">取消</view>
  30. </view>
  31.  
  32. </view>
  33. </view>
  34. </van-dropdown-item>

这代码怎么粘上来这么丑

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

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

我们直接给最外层的一个弹性盒加换轴方向 中间 给 overflow-x:hidden; flex:1

  1. .choice {
  2. width: 434rpx;
  3. height: 634rpx;
  4. display: flex;
  5. flex-direction: column;
  6.  
  7. .choice_top {
  8. width: 100%;
  9. height: 50rpx;
  10. text-align: center;
  11. line-height: 50rpx;
  12. color: rgb(83, 83, 83);
  13. position: relative;
  14.  
  15. .over {
  16. color: rgb(203, 203, 203);
  17. position: absolute;
  18. right: 15rpx;
  19. top: 0;
  20. width: 50rpx;
  21. height: 50rpx;
  22. }
  23. }
  24.  
  25. .choice_middle {
  26. overflow-x: hidden;
  27. flex: 1;
  28. text-align: center;
  29.  
  30. }
  31.  
  32. .choice_bottom {
  33. width: 100%;
  34. height: 100rpx;
  35.  
  36. .choice_we {
  37. width: 300rpx;
  38. height: 63rpx;
  39. margin-left: 63rpx;
  40. margin-top: 35rpx;
  41.  
  42. .choice_we_left {
  43. float: left;
  44. height: 63rpx;
  45. width: 50%;
  46. text-align: center;
  47. line-height: 63rpx;
  48. font-size: 30rpx;
  49. color: #fff;
  50. background-color: rgb(156, 156, 156);
  51. border-top-left-radius: 30rpx;
  52. border-bottom-left-radius: 30rpx;
  53. }
  54.  
  55. .choice_we_right {
  56. float: left;
  57. height: 63rpx;
  58. width: 50%;
  59. text-align: center;
  60. line-height: 63rpx;
  61. font-size: 30rpx;
  62. color: #fff;
  63. background-color: rgb(170, 191, 178);
  64. border-top-right-radius: 30rpx;
  65. border-bottom-right-radius: 30rpx;
  66. }
  67. }
  68. }
  69. }
  70. }

补充知识:记录-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的用法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

原文链接:https://blog.csdn.net/hfdxmz_3/article/details/106068817

延伸 · 阅读

精彩推荐