"" Drop-down component
1. The module structure:
2.index.js:
. 1 // The index.js 2 the Component ({ . 3 / * * . 4 * properties of the component list . 5 * / . 6 Properties: { . 7 propArray: { . 8 type: the Array, . 9 } 10 }, . 11 / * * 12 is the initial component * data 13 is * / 14 data: { 15 selectShow: to false , // initial option is not displayed 16 selectText: "select", // initial content 17 } 18 / * * 19 * The method of assembly of the list 20 is * / 21 is Methods: { 22 is // option to display or not 23 is selectToggle: function () { 24 var nowShow = the this .data.selectShow; // Get the current state of the displayed option 25 26 is the this .setData ({ 27 selectShow:! nowShow 28 }) 29 }, 30 // set the content 31 is the setText: function (E) { 32 var nowData = the this .properties.propArray; //Option is the introduction of the current component data pass over the page, it is only where the data acquired by this.properties 33 is var nowIdx = e.target.dataset.index; // current click index 34 is var nowText = nowData [nowIdx] .text nowData || [nowIdx] || nowData .Value [nowIdx]; // current click content 35 // Animate again, note there must, necessarily, must be animated this.animation 36 the this .setData ({ 37 [ selectShow : to false , 38 is selectText: nowText, 39 }) 40 the this .triggerEvent ( 'SELECT' , nowData [nowIdx]) 41 is } 42 is } 43 is })
3.index.json:
1 { 2 "component": true, 3 "usingComponents": {} 4 }
4.index.wxml:
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>
5.index.wxss:
1 /* components/single-dropdown-select/index.wxss */ 2 3 .ms-content-box { 4 width: 120px; 5 } 6 7 .ms-content { 8 border: 1px solid #e2e2e2; 9 background: white; 10 font-size: 16px; 11 position: relative; 12 height: 30px; 13 line-height: 30px; 14 } 15 16 .ms-text { 17 overflow: hidden; 18 text-overflow: ellipsis; 19 white-space: nowrap; 20 padding: 0 40px 0 6px; 21 font-size: 14px; 22 } 23 24 .ms-options { 25 background: white; 26 width: inherit; 27 position: absolute; 28 border: 1px solid #e2e2e2; 29 border-top: none; 30 box-sizing: border-box; 31 z-index: 3; 32 max-height: 120px; 33 overflow: auto; 34 } 35 36 .ms-option { 37 height: 30px; 38 line-height: 30px; 39 border-top: 1px solid #e2e2e2; 40 padding: 0 6px; 41 text-align: left; 42 overflow: hidden; 43 text-overflow: ellipsis; 44 white-space: nowrap; 45 font-size: 14px; 46 } 47 48 .ms-item:first-child { 49 border-top: none; 50 } 51 52 .icon-right, .icon-down, .icon-up { 53 display: inline-block; 54 padding-right: 13rpx; 55 position: absolute; 56 right: 20rpx; 57 top: 10rpx; 58 } 59 60 .icon-right::after, .icon-down::after, .icon-up::after { 61 content: ""; 62 display: inline-block; 63 position: relative; 64 bottom: 2rpx; 65 margin-left: 10rpx; 66 height: 10px; 67 width: 10px; 68 border: solid #bbb; 69 border-width: 2px 2px 0 0; 70 } 71 72 .icon-right::after { 73 -webkit-transform: rotate(45deg); 74 transform: rotate(45deg); 75 } 76 77 .icon-down::after { 78 bottom: 14rpx; 79 -webkit-transform: rotate(135deg); 80 transform: rotate(135deg); 81 } 82 83 .icon-up::after { 84 bottom: 0rpx; 85 -webkit-transform: rotate(-45deg); 86 transform: rotate(-45deg); 87 }
"" Use (reference page component):
1.pindex.js:
. 1 Page ({ 2 . 3 / * * . 4 * page initial data . 5 * / . 6 Data: { . 7 selectArray: [{ . 8 "ID": "10" , . 9 "value": "Accounting class" 10 }, { 11 "ID": "21 is" , 12 is "text": "Engineering" 13 }, 'technical category', { 'value': 'other'} ] 14 }, 15 16 SELECT: function (E) { . 17 Console. log (e. detail) 18 } 19 20 })
2.pindex.json:
1 { 2 "navigationBarTitleText":"下拉测试", 3 "usingComponents": { 4 "single-dropdown-select": "/components/single-dropdown-select/index" 5 } 6 }
3.pindex.wxml:
1 <view class="weui-cell"> 2 <view class="weui-cell__hd">类型:</view> 3 <view class="weui-cell__bd"> 4 <single-dropdown-select prop-array='{{selectArray}}' bind:select='select' /> 6 </view> 7 </view>
Fig 4. Effects: