마이크로 편지 애플릿 - 숫자의 범위를 선택

 긴 시간이 더 갱신이 약간의 특집 기사는 오늘 ~~ 기록을 얻을 수 없습니다.

지도 첫 :

수요는 매우 간단합니다 :

1 열은 제 2 컬럼과 함께 변화하고, 제 1 K보다 큰 열을 변경 하였다.

 

여기서 우리는 마이크로 문자 사용 선택기 구성 요소를 덜 숙련 주니어 파트너에 대한이 구성 요소를 볼 수 있습니다 공식 문서 .

아래 그림과 같이 다중 열 선택기 주요 사용 :

 

해결 방법 :

도 1은 다음 형태의 onLoad에 2 차원 어레이를 생성한다 :

[ "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;
    이 .setData (데이터) 
},

방법 설명 :

1.currentColunm 현재 슬라이드의 열 수를 나타낸다

칼럼의 선택을 나타내는 2.currentClounmIndex 인덱스 값

도는 다음과 같습니다 :

 

최적화를 찾고 후 :

2 봅시다 선택 간격은 첫 번째 열보다 항상 크다.

 

당신이 더 적절한 해결책이있는 경우 주니어 파트너, 보관 해주세요 ~~