微信小程序下拉框组件使用方法

小程序有时需要使用下拉框选项，通常我会使用 picker 组件实现。pick 组件使用 mode 来区分类别，默认使用普通选择器就行。
除了上述方式，我们也可以通过自定义组件实现，代码如下：

1. //index.js
2. Component({
3. /**
4. * 组件的属性列表
5. */
6. properties: {
7.   propArray: {
8.    type: Array,
9.   }
10. },
11. /**
12. * 组件的初始数据
13. */
14. data: {
15.   selectShow: false,//初始option不显示
16.   selectText: "请选择",//初始内容
17. },
18. /**
19. * 组件的方法列表
20. */
21. methods: {
22.   //option的显示与否
23.   selectToggle: function () {
24.    var nowShow = this.data.selectShow;//获取当前option显示的状态
26.    this.setData({
27.     selectShow: !nowShow
28.    })
29.   },
30.   //设置内容
31.   setText: function (e) {
32.    var nowData = this.properties.propArray;//当前option的数据是引入组件的页面传过来的，所以这里获取数据只有通过this.properties
33.    var nowIdx = e.target.dataset.index;//当前点击的索引
34.    var nowText = nowData[nowIdx].text || nowData[nowIdx].value || nowData[nowIdx];//当前点击的内容
35.    //再次执行动画，注意这里一定，一定，一定是this.animation来使用动画
36.    this.setData({
37.     selectShow: false,
38.     selectText: nowText,
39.    })
40.    this.triggerEvent('select', nowData[nowIdx])
41.   }
42. }
43. })

复制代码

代码如下：

1. <view class='ms-content-box'>
2.   <view class='ms-content' bindtap='selectToggle'>
3.     <view class='ms-text'>{{selectText}}</view>
4.     <view class="{{selectShow ? 'icon-up' : 'icon-down'}}"></view>
5.   </view>
6.   <view class='ms-options' wx:if="{{selectShow}}">
7.     <view wx:for="{{propArray}}" data-index="{{index}}" wx:key='index' class'ms-option' bindtap='setText'>{{item.text || item.value || item}}</view>
8.   </view>
9. </view>

复制代码

样式实现：

1. /* components/single-dropdown-select/index.wxss */
3. .ms-content-box {
4. width: 120px;
5. }
6. .ms-content {
7. border: 1px solid #e2e2e2;
8. background: white;
9. font-size: 16px;
10. position: relative;
11. height: 30px;
12. line-height: 30px;
13. }
14. .ms-text {
15. overflow: hidden;
16. text-overflow: ellipsis;
17. white-space: nowrap;
18. padding: 0 40px 0 6px;
19. font-size: 14px;
20. }
21. .ms-options {
22. background: white;
23. width: inherit;
24. position: absolute;
25. border: 1px solid #e2e2e2;
26. border-top: none;
27. box-sizing: border-box;
28. z-index: 3;
29. max-height: 120px;
30. overflow: auto;
31. }
32. .ms-option {
33. height: 30px;
34. line-height: 30px;
35. border-top: 1px solid #e2e2e2;
36. padding: 0 6px;
37. text-align: left;
38. overflow: hidden;
39. text-overflow: ellipsis;
40. white-space: nowrap;
41. font-size: 14px;
42. }
43. .ms-item:first-child {
44. border-top: none;
45. }
46. .icon-right, .icon-down, .icon-up {
47. display: inline-block;
48. padding-right: 13rpx;
49. position: absolute;
50. right: 20rpx;
51. top: 10rpx;
52. }
53. .icon-right::after, .icon-down::after, .icon-up::after {
54. content: "";
55. display: inline-block;
56. position: relative;
57. bottom: 2rpx;
58. margin-left: 10rpx;
59. height: 10px;
60. width: 10px;
61. border: solid #bbb;
62. border-width: 2px 2px 0 0;
63. }
64. .icon-right::after {
65. -webkit-transform: rotate(45deg);
66. transform: rotate(45deg);
67. }
68. .icon-down::after {
69. bottom: 14rpx;
70. -webkit-transform: rotate(135deg);
71. transform: rotate(135deg);
72. }
73. .icon-up::after {
74. bottom: 0rpx;
75. -webkit-transform: rotate(-45deg);
76. transform: rotate(-45deg);
77. }

复制代码

如何使用呢？首先在引用组件的页面，引入组件：

1. {
2. "usingComponents": {
3.   "single-dropdown-select": "/components/single-dropdown-select/index"
4. }
5. }

复制代码

在页面中，直接使用 引入的组件，代码如下：

1. <view>
2.   <single-dropdown-select prop-array='{{selectArray}}' bind:select='select' />
3. </view>

复制代码

同时传入数据和监听子组件向父组件传递的 select 方法。

1. Page({
2. data: {
3.   selectArray: [{
4.    "id": "10",
5.    "value": "会计类"
6.   }, {
7.    "id": "21",
8.    "text": "工程类"
9.   }, '技术类', {'value': '其他'}]
10. },
11. select: function(e) {
12.   console.log(e.detail)
13. }
14. })

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。