Micro letter applet - select a range of numbers

 Long time no update it a little feature article today get ~~ record.

First on the map:

Demand is very simple:

Column 1 was changed, the change along with the second column, and the column than the first large 1k.

 

Here we used the micro-letter picker component , this component for the less skilled junior partner can look at the official documentation .

Main use of multi-column selectors, as shown below:

 

Solutions:

1 generates a two-dimensional array in which onLoad following form:

[['1K','2K','3K','4K','5K','6K','7K','8K'...],['1K','2K','3K','4K','5K','6K','7K','8K'...]]

 

onLoad: function(options) {
    const _this = this;
    let salaryStart = [],
      salaryEnd = [],
      salaryArray = [];
    for (let i = 1; i < 100; i++) {
      salaryStart.push(`${i}k`);
      salaryEnd.push(`${i+1}k`)
    }
    salaryArray.push(salaryStart);
    salaryArray.push(salaryEnd);
    _this.setData({
      salaryArray: salaryArray
    })
  },

 

2.data数据设置如下：

data:{
    salaryArray: [],
    salaryIndex: [0, 0],
}

 

3.在wxml绑定这些数据

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{salaryIndex}}" range="{{salaryArray}}">
　　<view class="picker">
　　{{salaryArray[0][salaryIndex[0]]}}-{{salaryArray[1][salaryIndex[1]]}}
　　</view>
</picker>

 

4.定义bindchange 和 bindcolumnchange方法

//确定时触发该事件
bindMultiPickerChange(e) {
    this.setData({
      salaryIndex: e.detail.value
    })
},
//滑动列时触发该事件
bindMultiPickerColumnChange(e) {
    let currentColunm = e.detail.column; 
    let currentClounmIndex = e.detail.value; 
    let salaryArray = this.data.salaryArray
    console.log('修改的列为', currentColunm, '，值为', currentClounmIndex);
    let data = {
      salaryArray: this.data.salaryArray, 
      salaryIndex: this.data.salaryIndex 
    }
    data.salaryIndex[currentColunm] = currentClounmIndex
    data.salaryIndex[1] = currentClounmIndex;
    this.setData(data)
},

Method Description:

1.currentColunm represents the number of columns in the current slide

2.currentClounmIndex index value indicating the selection of a column

As shown below:

 

After looking Optimization:

Let selectable interval of 2 is always greater than the first column.

 

Junior partner if you have a more appropriate solution, please keep ~~