百分比列表滑动选择

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

ui代码如下

    <div v-if="proportionShow" style="width: 100%;height: 100%;position: fixed;top: 0;bottom: 0;left: 0;background: rgba(0, 0, 0, 0.5);" class="rate-new-class">
      <div style="width: 100%;height: 250px;position: absolute;bottom: 0;background: white;">
        <van-picker
          show-toolbar
          title="选择本金转让比例"
          :columns="newcolumns"
          @cancel="proportionShow = false"
          @confirm="proportiononConfirm"
          @change="proportionononChangePicker"
        />
      </div>
    </div>

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
        }
      ],