百分比列表滑动选择

屏幕快照 2019-08-02 上午10.36.19.png

ui代码如下

css

 .rate-new-class{
    .van-picker__title{
      font-size: 17px;
      color: #000;
    }
    .van-picker__cancel, .van-picker__confirm{
      color: #0A87EB;
      font-size: 17px;
    }
    .van-picker-column__item{
      font-size: 18px;
    }
    .van-picker-column.column3{
     margin-right: -20px;
      flex: 2;
      .van-picker-column__item{
        font-size: 14px;
        color: #ff0000;
      }
    }
  }

js

 proportionononChangePicker: function (picker, values) {
      picker.setColumnValues(1, proportionList[values[0]])
    },
    proportiononConfirm (value, index) {
      console.log('点击比例确认')
      this.proportionNum = value[0]
      this.proportionNumcopy = this.proportionNum.substring(0, this.proportionNum.length-1)
      console.log('转让比例值')
      console.log(this.proportionNumcopy)

      this.transferAmount = parseFloat(this.quetoResult.balanceAmount) * parseFloat(this.proportionNumcopy) / 100
      console.log('总额乘以转让比例的数额')
      console.log(this.transferAmount)

      this.proportionShow = false
      if (parseFloat(this.transferAmount) <= 10000) {
        if (value[0] != '100%') {
          Toast('因债权金额小于一万元请重新选择')
          return
        }
      }
    }

数据源

let proportionList = ['10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%']

  newcolumns: [
        {
          values: proportionList,
          className: 'newcolumns',
          defaultIndex: 4
        }
      ],