Wechat applet custom multi selector

demand

How to choose more than one ？ Selector has multiple columns 、 Single item but no multiple items , Do it yourself , Have ample food and clothing ！

The effect that needs to be achieved

Print the confirmed value on the import page

Realize the idea

• To have a mask layer , Mask layer and selector Don't nest , Otherwise, clicking the selector may trigger a mask layer event .
• The mask layer is a fixed layout , All over the screen ; Selectors are absolute layouts , Take up... Of the screen 60%.
• Selectors The toolbar should be fixed , Under the toolbar The options should be scrollable .
• Click options to You can choose , Click again on the Cancel .
• Click... In the toolbar Cancel , determine ; Click on mask Want to have triggerEvent
• How to determine whether an option has been selected ？ Here I use arrays selectedArray To select an option, index the option push go in , Judge whether it is on the selected array on the node , On display selected style , Show when you're not there normal style . Be careful ： Array selectedArray What is stored is the index of the element in the selector data source .
• Clear after data transfer selectedArray

difficulty

• How to judge whether the element is in the selected array on the node ？
  Wechat does not vue Filter , But there are wxs, This can be used as a filter .
  
  
  Be careful ： Be sure to create a new wxs File re import for use

• How to click to select , Click Cancel again ？
  First determine whether it is in the selected array , If you do, cancel , That is, stack from the selected array , If you are not there, choose , That is, the stack array .
  

The page introduce

Some fake data

Source code

mpx frame

Components ：

<template>
  <view wx:if="{
    {show}}" class="overlay" bindtap="toClose"></view>
  <view class="container" wx:if="{
    {show}}">
    <view class="toolbar">
      <view class="cancel" catchtap="toClose"> Cancel </view>
      <view class="title">{
    {
    title}}</view>
      <view class="confirm" catchtap="toConfirm"> confirm </view>
    </view>

    <view class="contentBox">
      <block wx:for="{
    {option}}" wx:key="index">
        <view
          class="contentItem {
    {common.isContain(selectedArray, index) ? 'selected' : 'normal' }}"
          catchtap="select(index)"
        >{
    {
    item.text}}</view>
      </block>
    </view>
  </view>

  <wxs module="common" src="../../wxs/common.wxs" />
</template>
<script>
import {
     createComponent } from '@mpxjs/core'

createComponent({
    
  data: {
    
    show: false, //  Control whether to show 
    selectedArray: [0] //  The first... Is selected by default 
  },
  properties: {
    
    title: {
    
      type: String,
      value: ''
    },
    show: {
    
      type: Boolean,
      value: false,
      observer: function(val) {
    
        this.setData({
    
          show: val
        })
      }
    },
    option: {
    
      type: Array,
      value: []
    }
  },
  methods: {
    
    //  Turn off the pop-up layer 
    toClose() {
    
      this.setData({
     //  Clear the selected array 
        selectedArray: []
      })
      this.triggerEvent('close')
    },
    //  confirm 
    toConfirm() {
    
      let object = {
    }
      let array = []
      this.selectedArray.forEach(element => {
    
        array.push(this.option[element])
      })
      object.value = array
      this.setData({
     //  Clear the selected array 
        selectedArray: []
      })
      this.triggerEvent('confirm', object)
    },
    //  choice 
    select(index) {
    
      if (this.selectedArray.includes(index)) {
    
        //  Already in the selected array 
        let position = this.selectedArray.indexOf(index)
        this.selectedArray.splice(position, 1) //  Out of the stack 
      } else {
    
        //  Not in the selected array 
        this.selectedArray.push(index) //  Into the stack 
      }
    }
  }
})
</script>
<style lang="stylus" scoped>
.overlay
  background rgba(0, 0, 0, 0.7)
  position fixed
  top 0
  left 0
  width 100%
  height 100%
  z-index 20
.container
  z-index 21
  position absolute
  background #fff
  bottom 0
  left 0
  width 100%
  height 60%
  box-sizing border-box
  border-radius 20rpx 20rpx 0 0
  padding 30rpx 32rpx 40rpx 32rpx
  .toolbar
    width 100%
    height 10%
    display flex
    justify-content space-between
    align-items center
    padding 0 0 30rpx 0
    .cancel
      font-size 26rpx
      color #909090
      text-align left
    .confirm
      color #576b95
      font-size 26rpx
      text-align right
    .title
      color #242424
      font-size 32rpx
      font-weight 500
  .contentBox
    width 100%
    height 90%
    overflow scroll
    .contentItem
      width 100%
      height 60rpx
      border-radius 6rpx
      font-size 32rpx
      color #242424
      text-align center
      line-height 56rpx
      margin-bottom 30rpx
.normal
  border 1px solid #ddd
.selected
  border 1px solid #6ed854
</style>
<script type="application/json">
{
     
    "component": true,
    "usingComponents": {
    
    }
}
</script>

wxs:

//  Is it in an array 
var isContain = function (array, item) {
    
    return array.indexOf(item) === -1 ? false : true
}
module.exports = {
    
    isContain: isContain
}