小程序组件的使用（二） packer多选组件

小程序组件的使用(二) packer多选组件

JS

let list = [];
Component({
  data: {
    showPicker: false,
    firstShow: false,
    list: []
  },
  properties: {
    chooseList: {
      type: Array
    },
    multiple: {
      type: Boolean
    }
  },
  methods: {
    // 点击picker元素事件 
    chooseItem(e) {
      if (this.properties.multiple) {
        // 多选事件
        let val = e.target.dataset.value;
        let arr = this.data.chooseList;
        let flag = '';
        let index = null;
        for (let i = 0, len = arr.length; i < len; i++) {
          if (arr[i].value == val) {
            index = i;
            flag = `chooseList[${i}].flag`
          }
        }
        if (!this.data.chooseList[index].flag) {
          this.setData({
            [flag]: true
          })
        } else {
          this.setData({
            [flag]: false
          })
        }
      } else {
        // 单选事件
        let val = e.target.dataset.value;
        let arr = this.data.chooseList;
        let flag = '';
        let index = null;
        for (let i = 0, len = arr.length; i < len; i++) {
          index = i;
          flag = `chooseList[${i}].flag`;
          if (arr[i].value == val) {
            this.setData({
              [flag]: true
            })
          } else {
            this.setData({
              [flag]: false
            })
          }
        }
      }
    },
    // 展示picker
    showPicker() {
      if (!this.data.firstShow) {
        this.setData({
          firstShow: true
        })
      }
      this.setData({
        showPicker: true,
      })
      // 加载时重新渲染已选择元素
      let arr = this.data.chooseList;
      let array = this.data.list;
      let flag = '';
      let index = null;
      for (let i = 0, len = arr.length; i < len; i++) {
        index = i;
        flag = `chooseList[${i}].flag`;
        if (!array.includes(arr[i].value)) {
          this.setData({
            [flag]: false
          })
        } else {
          this.setData({
            [flag]: true
          })
        }
      }
    },
    // 隐藏picker
    hidePicker() {
      this.setData({
        showPicker: false
      })
    },
    // 取消按钮事件
    cancal() {
      this.hidePicker();
    },
    // 确定按钮事件
    sure() {
      list = [];
      for (let item of this.data.chooseList) {
        if (item.flag) {
          list.push(item.value);
        }
      }
      this.setData({
        list
      })
      this.hidePicker();
      this.triggerEvent('chooseEvent', {
        chooseArray: this.data.list
      });
    }
  }
})

wxml

<view class='showPicker' bindtap='showPicker'>MyPicker</view>
<cover-view class='{{ showPicker ? ".shade-container" : "hide-container" }}' wx:if='{{ firstShow }}'>
    <cover-view class='left-shade' bindtap='hidePicker'></cover-view>
    <cover-view class='right-choose'>
        <cover-view class='button-container'>
            <cover-view class='cancal' bindtap='cancal'>取消</cover-view>
            <cover-view class='sure' bindtap='sure'>确定</cover-view>
        </cover-view>   
        <cover-view class='picker-container'>
            <cover-view
                class='picker-item {{ item.flag ? "picker-item-choose" : "" }}'
                wx:for='{{ chooseList }}'
                wx:key='index' wx:for-item='item'
                bindtap='chooseItem'
                data-value='{{ item.value }}'
            >
                {{ item.name }}
            </cover-view>
        </cover-view>
    </cover-view>
</cover-view>

wxss

/* pages/component/picker/picker.wxss */
page {
    height: 100%;
    width: 100%;
}

.showPicker {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 30rpx;
    background-color: paleturquoise;
    text-align: center;
}

.shade-container {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    right: -200%;
    display: flex;
    justify-content: space-around;
    background-color: rgba(0, 0, 0, 0.5);
    transform: translateX(-200%);
    transition: all 0.5s ease;
    z-index: 9999;
}

.hide-container {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    right: -200%;
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    transform: translateX(100%);
    transition: all 0.5s ease-in;
}

.left-shade {
    width: 30%;
    height: 100%;
}

.right-choose {
    width: 70%;
    height: 100%;
    background-color: #fff;
    padding: 40rpx;
}

.picker-container {
    height: calc(100% - 200rpx);
    overflow-x: hidden;
    overflow-y: scroll;
    margin-top: 40rpx;
}

.picker-container::-webkit-scrollbar {
    display: none;
}

.picker-item {
    width: calc(100% - 8rpx);
    height: 50rpx;
    line-height: 50rpx;
    font-size: 24rpx;
    text-align: center;
    margin-top: 20rpx;
    border: 2rpx solid #eaeaea;
    border-radius: 8rpx;
}

.picker-item-choose {
    border: 2rpx solid rgb(110, 216, 84);
}

.picker-item:nth-of-type(1) {
    margin: 0;
}

.button-container {
    width: 100%;
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    text-align: center;
    border-bottom: 2rpx solid #eaeaea;
}

.cancal {
    width: 100rpx;
    height: 40rpx;
    line-height: 40rpx;
    border: 2rpx solid #ddd;
    border-radius: 8rpx;
}

.sure {
    width: 100rpx;
    height: 40rpx;
    line-height: 40rpx;
    border: 2rpx solid rgb(132, 235, 132);
    border-radius: 8rpx;
}

demo

picker组件demo下载

参考博客