微信小程序 薪资联动区间选择器 点击确认后显示薪资

先看下效果图
选择 面议 时，薪资显示 面议

选择具体的薪资时，显示具体的薪资范围


代码
wxml

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{index}}" range="{{dbArray}}">
        <van-field value="{{ salary=='0k - 1k'?'面议':salary }}" required clearable label="期望薪资" name="salary" placeholder="请选择您期望的薪资（元/月）" icon="arrow" readonly />
      </picker>

js

Page({
  data: {
    salary:'',//薪资
    //薪资范围选择
    dbArray: [
      [''],
      ['']
    ],
    dbindex: [
      [0],
      [0]
    ],
    salaryOut: ["", ""],
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let arr = ["面议"]
    for (let i = 1; i < 26; i++) {
      arr[i] = i + "K"
    }
    this.data.dbArray[0] = arr
    this.setData(this.data)
  },
  //薪资选择框确认
  bindMultiPickerChange: function (e) {
    this.setData({
      salary: `${e.detail.value[0]+'k'} - ${e.detail.value[1]+e.detail.value[0]+1+'k'}`
    })
  },
  //薪资选择框滚动
 bindMultiPickerColumnChange: function (e) {
    console.log(e)
    let newSalary = this.data.salaryOut;
    let newArray = this.data.dbArray;
    let newIndex = this.data.dbindex;
    if (e.detail.column === 0) {
      switch (e.detail.value) {
        case 0:
          newArray[1] = [];
          newIndex[1] = 0;
          newSalary[0] = ['面议'];
          newSalary[1] = [];
          break;
        default:
          let dbArray = [];
          for (let i = 0; i < 7; i++) {
            dbArray[i] = i;
            dbArray[i] += 1;
          }
          for (let i = 0; i < dbArray.length; i++) {
            let num = Number(e.detail.value);
            dbArray[i] += num;
            dbArray[i] += "K"
          }
          newArray[1] = dbArray;
          newSalary[0] = newArray[0][e.detail.value];
          newSalary[1] = newArray[1][newIndex[1]];
          break;
      }
    } else {
      newSalary[1] = newArray[1][e.detail.value];
    }
    this.setData({
      salaryOut: newSalary,
      dbArray: newArray,
      dbindex: newIndex,
    })
  },

分析
picker组件 官网地址 https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

bindchange事件 点击确认时，选中的项
bindcolumnchange事件 滑动列表时，列改变时触发的事件

借鉴的博客地址 https://blog.csdn.net/z1z2z345/article/details/115290632