小程序右侧滑入下拉框总结

1    自定义组件
1.1    组件名right-picker
定义目录如下：
 
1.2    right-picker.wxml内容
<view bindtap='showPicker' class="show">
    <view class='showImage'>
        <image src="../images/triangle.png" />
    </view>
    <view class='showPickerInput'>
        <input class="inputText" bindinput="" value="{{inputValue}}" disabled="true"/>
    </view>
</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' catchtap='chooseItem' data-value='{{ item.value }}'>
                {{ item.name }}
            </cover-view>
        </cover-view>
    </cover-view>
</cover-view>
1.3    right-picker.wxss内容
page {
  height: 100%;
  width: 100%;
}
.show{
  display: flex;
  position: relative;
}
.showImage{
  position: absolute;
  right: 5rpx;
  top: 5rpx;
}
.showImage image{
  width: 20rpx;
  height: 20rpx;
}
.showPickerInput {
  width: 100%;
  font-size: 30rpx;
}

.inputText {
  font-size: 24rpx;
  border: 1rpx solid;
  width: 100%;
  padding-left: 5rpx;
}

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

.hide-container {
  display: flex;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: -100%;
  z-index: 9999;
  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: left;
  margin-top: 20rpx;
  border-bottom: 2rpx solid #eaeaea;
  box-sizing: 0px;
}

.picker-item-choose {
  border-bottom: 2rpx solid #445cd0;
  box-sizing: 0px;
  color: #445cd0;
  font-size: 28rpx;
  height: 50rpx;
}

.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-radius: 8rpx;
  background-color: #445cd0;
  border: 2rpx solid #445cd0;
  color: white;
}
1.4    right-picker.js内容
let list = [];

Component({
    data: {
        showPicker: false,
        list: [],
        inputValue:"",
        firstShow: true
    },
    properties: {
        chooseList: {
            type: Array
        },
        multiple: {
            type: Boolean
        },
        show: {
            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() {
            console.log("show:"+this.properties.show);
            if(this.properties.show) {
                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 = [];
            let flag = '';
            for (let item of this.data.chooseList) {
                if (item.flag) {
                    list.push(item.value);
                    list.push(item.name);
                }
            }
            
            this.setData({
                list,
                inputValue: list[1]
            })
            console.log("list:"+this.data.list);
            this.hidePicker();
            this.triggerEvent('chooseEvent', {
                chooseArray: this.data.list
            });
        }
    }
})

2    调用组件（例如在index页面调用）
2.1    index.json引入组件
{
  "usingComponents": {
    "right-picker": "../../Component/right-picker"
  }
}

2.2    index.wxml代码
show这个属性是为了联动下拉框做的，比如一个下拉框没填，会影响到别的下拉框因为这个下拉框没值就会没有数据，组件就不应该滑出。如果页面只引用了一次下拉框组件，给show属性定义为true即可，表示始终滑出
<right-picker
          bind:chooseEvent='chooseStore'
          chooseList='{{ storeList }}'
          multiple='{{ multiple }}'
          value='{{storeName}}'
          show='{{showStore}}'
        ></right-picker>
2.3    index.js页面与下拉框组件相关代码
data: {
    storeList: [],
    multiple: false,
    chooseArray: [],
    storeId: "",
    storeName: "",
    showStore: true
  },
chooseStore(e) {
        this.setData({
      chooseArray: e.detail.chooseArray,
      storeId: e.detail.chooseArray[0],
      storeName: e.detail.chooseArray[1],
      showPsCenter: true
    })
  }