微信小程序——選擇某個區間的數字

 很久沒有更新文章啦~~記錄下今天弄的一個小功能。

先上圖：

需求很簡單：

第1列改變的時候，第2列也隨着改變，並且比第1列大1k。

 

這里用到了微信的picker 組件，對於不太熟練這個組件的小伙伴可以先看下官方文檔。

主要用到了多列選擇器，如下圖：

 

解決思路：

1.在onLoad里面生成一個二維數組，形式如下：

[['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)
},

方法說明：

1.currentColunm 表示當前滑動的列數

2.currentClounmIndex 表示選擇某一列的值的索引

如下圖：

 

后期待優化：

讓第2列的可選擇區間永遠大於第1列。

 

各位小伙伴如果有更合適的解決方案，望不吝賜教~~