本文实例为大家分享了微信小程序自定义select下拉选项框的具体代码，供大家参考，具体内容如下

第一步：创建组件所需的文件

第二步：开始配置组件

select.json

{   "component": true,   "usingComponents": {     "select": "./select"   } }

第三步：自定义组件样式及js

select.wxml

<view class='com-selectBox'>     <view class='com-sContent' bindtap='selectToggle'>         <view class='com-sTxt'>{{nowText}}</view>         <image src='../../public/image/index/jinru1@2x.png'  class='com-sImg'  animation="{{animationData}}"></image>     </view>     <view class='com-sList' wx:if="{{selectShow}}">         <view wx:for="{{propArray}}" data-index="{{index}}" wx:key='' class='com-sItem' bindtap='setText'>{{item.text}}</view>     </view> </view>

select.wxss

.com-selectBox{   width: 200px; } .com-sContent{   border: 1px solid #e2e2e2;   background: white;   font-size: 16px;   position: relative;   height: 30px;   line-height: 30px; } .com-sImg{   position: absolute;   right: 10px;   top: 11px;   width: 16px;   height: 9px;   transition: all .3s ease; } .com-sTxt{   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap;   padding:0 20px 0 6px;   font-size: 14px; } .com-sList{   background: white;   width: inherit;   position: absolute;   border: 1px solid #e2e2e2;   border-top: none;   box-sizing: border-box;   z-index: 3;   max-height: 120px;   overflow: auto; } .com-sItem{   height: 30px;   line-height: 30px;   border-top: 1px solid #e2e2e2;   padding: 0 6px;   text-align: left;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap;   font-size: 14px; } .com-sItem:first-child{   border-top: none; }

select.js

Component({   /**    * 组件的属性列表    */   properties: {     propArray: {       type: Array,     }   },   /**    * 组件的初始数据    */   data: {     selectShow: false, //初始option不显示     nowText: "请选择", //初始内容     animationData: {} //右边箭头的动画   },   /**    * 组件的方法列表    */   methods: {     //option的显示与否     selectToggle: function () {       var nowShow = this.data.selectShow; //获取当前option显示的状态       //创建动画       var animation = wx.createAnimation({         timingFunction: "ease"       })       this.animation = animation;       if (nowShow) {         animation.rotate(0).step();         this.setData({           animationData: animation.export()         })       } else {         animation.rotate(180).step();         this.setData({           animationData: animation.export()         })       }       this.setData({         selectShow: !nowShow       })     },     //设置内容     setText: function (e) {       var nowData = this.properties.propArray; //当前option的数据是引入组件的页面传过来的，所以这里获取数据只有通过this.properties       var nowIdx = e.target.dataset.index; //当前点击的索引       var nowText = nowData[nowIdx].text; //当前点击的内容       //子组件触发事件       var nowDate = {         id: nowIdx,         text: nowText       }       this.triggerEvent('myget', nowDate)       //再次执行动画，注意这里一定，一定，一定是this.animation来使用动画       this.animation.rotate(0).step();       this.setData({         selectShow: false,         nowText: nowText,         animationData: this.animation.export()       })     }   } })

第四步：引入组件，传入组件所需数据

1、引入组件的页面的json文件中配置

{   "usingComponents": {     "Select": "../../components/select/select"   },   "navigationBarTitleText": "" }

2、引入组件的页面的wxml文件中配置bind:myget=‘getDate’ 对组件的事件进行监听

<Select prop-array='{{selectArray}}' bind:myget='getDate'></Select>

3、引入组件的页面的js文件中配置

data:{     selectArray: [         {             "id": "01",             "text": "停车A区"         },          {             "id": "02",             "text": "停车B区"         }     ]  } getDate:function(e){     console.log(e.detail) }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。