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>

这代码怎么粘上来这么丑

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

我们直接给最外层的一个弹性盒加换轴方向 中间 给 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

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

3.data和methods部分

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

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