微信小程序自定义select下拉选项框的方法

本文实例为大家分享了微信小程序自定义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)
}

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