微信小程序select下拉组件封装

 

前言

刚接触微信小程序，之前有使用vue的底子，今天就分享一个自己封装的下拉组件（参考别人的组件按自己需求修改的），个人是不是很喜欢造轮子，如果有现成的都喜欢复制粘贴改改哈哈，都是之前公司养的坏毛病。

需求

项目需要一个下拉框进行数据筛选，微信小程序有提供自己的一个picker，但是跟我们设计需求不一样，微信小程序好像不支持select标签，如果支持，样式也改不到理想状态，所以最终还是封装了个组件。效果如下。

代码

子组件

component/select/select.wxml

<view class='com-selectBox'>
  <view class='com-sContent' bindtap='selectToggle'>
    <view class='com-sTxt'> {
   
   { nowText }}</view>
    <image src='../../img/arrow.png' class='com-sImg' animation="{
   
   {animationData}}"></image>
  </view>
  <view class='com-sList' wx:if="{
   
   {selectShow}}">
    <view wx:for="{
   
   {propArray}}" data-index="{
   
   {index}}" data-id="{
   
   {item.id}}" wx:key='' class="com-sItem {
   
   {num==item.id?'cur':''}}" bindtap='setText'>{
   
   {item.text}}</view>
  </view>
</view>

 

 component/select/select.wxml

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    propArray: {
      type: Array,
    },
    defalutSelect:{
      type:String
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    selectShow: false, //初始option不显示
    nowText: "请选择", //初始内容
    animationData: {}, //右边箭头的动画
    num: ''
  },
  attached() {
    // 在组件实例进入页面节点树时执行
    this.initSelect();
  },
  /**
   * 组件的方法列表
   */
  methods: {
    initSelect: function () {
      var nowData = this.properties.propArray;
      var seletedID = this.properties.defalutSelect;
      if (seletedID){
        var nowText = nowData.find(obj => obj.id == seletedID).text
        this.setData({
          selectShow: false,
          nowText: nowText,
          num: seletedID
        })
      }
    },　　　 
    //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.id; //当前点击的索引
      var nowText = nowData.find(obj => obj.id == nowIdx).text //当前点击的内容
      //再次执行动画，注意这里一定，一定，一定是this.animation来使用动画
      this.animation.rotate(0).step();
      this.setData({
        selectShow: false,
        nowText: nowText,
        num: nowIdx,
        animationData: this.animation.export()
      })
      this.triggerEvent('selected', {
        selectedID: e.target.dataset.id
      });
    }
  }
})

  component/select/select.wxss

.com-selectBox{
    width: 100px;
    color: #999BA0;
}
.com-sContent{
    font-size: 12px;
    position: relative;
    height: 30px;
    line-height: 30px;
}
.com-sContent .com-sImg{
    position: absolute;
    right: 5px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4px;
    transition: all .3s ease;
}
.com-sTxt{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding:0 18px 0 6px;
    font-size: 12px;
    text-align: right
}
.com-sList{
    width: inherit;
    position: absolute;
    text-align: center;
    box-sizing: border-box;
    background:rgba(255,255,255,1);
    box-shadow:0px 4px 8px 0px rgba(22,22,22,0.2);
    border-radius:2px;
    z-index: 3;
    max-height: 120px;
    overflow: auto;
}
.com-sItem{
    height: 40px;
    line-height: 40px;
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}
.com-sItem.cur{
    color: #E50150;
}

 使用

需要在要使用的页面上注册,如果没有默认选择，defalut-select就不用传。

index.json

{
  "usingComponents": {
    "Select": "/component/select/select"
  }
}

 index.wxml

<Select prop-array='{
   
   {selectArray}}' defalut-select='{
   
   {sortType}}' bind:selected='selectEvent'></Select>

index.js

data: {
    selectArray: [
      {
        id: 2,
        text: "按演出数"
      },
      {
        id:3,
        text: "最新入驻"
      },
      {
        id: 1,
        text: "按粉丝数"
      }
    ],
    sortType:2
  },
/* 下拉组件 */
  selectEvent: function (e) {
    this.setData({
      sortType: e.detail.selectedID,
      pageIndex: 1,
    });
    this.Get();
  }

补个箭头的资源

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAAOVBMVEUAAABxc3dxc3dxc3dxc3dxc3dxc3dxc3dxc3dxc3dxc3dxc3dxc3dxc3dxc3dxc3dxc3dxc3dxc3f8k1LPAAAAEnRSTlMAcBfg9evkbDAc1MxQRjchDwj+8q3fAAAAR0lEQVQY07XMSQ7AIAxDUTelQGfI/Q+LiKIo7OEtvyxjuTNtJhVJkZ1d0uXTLYkON6p6Zi0S1B90QzBZSiA4b08Zg4f5w3wNWN0E/KGu24gAAAAASUVORK5CYII=

 参考