美文网首页
百分比列表滑动选择

百分比列表滑动选择

作者: 艾希_可可 | 来源:发表于2019-08-14 22:53 被阅读0次
屏幕快照 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
        }
      ],

相关文章

  • 百分比列表滑动选择

    ui代码如下 css js 数据源

  • View所显示的百分比

    前言 在开发中,遇到了计算View显示的百分比来表明是否曝光主要的场景就是在滑动列表中View展示的百分比。 RX...

  • 列表循环滑动

    很多地方需要滑动列表,比如:排行榜。滑动列表组件: 其中ScrollView,就是控制滑动的组件 Viewport...

  • Android TV Leanback 简介

    TV 纵向滑动列表介绍 构建滑动列表的几种方式: ListView / RecyclerView 自定义Linea...

  • RN-实现抖音切换视频效果

    实现效果1、上下滑动切换2、 左滑动弹出列表,右滑动取消列表3、加载更多、刷新 思路 通过滑动的x、y判断是上下滑...

  • 列表视图与网格视图

    列表视图优点 符合F型阅读习惯,遵循自然的阅读模式 防止过量滑动,在可见区域提供更多选择 列表视图缺点 比较中庸,...

  • 左右上下联动滑动列表效果

    上面这个是左右上下联动滑动列表效果,其实就是左边一个列表可以上下滑动,右边一个列表可以上下左右滑动,然后再将左边列...

  • ionic城市选择列表A-Z

    ionic城市选择列表A-Z滑动效果 转载请注明出处:http://www.jianshu.com/p/ae4aa...

  • Runloop优化列表滑动卡顿

    Runloop优化列表滑动卡顿

  • Android自定义Excel表格的效果

    整个视图分为3个部分,左边上下滑动的列表,右侧上部左右滑动的线性布局,右侧下部上下左右都能滑动的列表。 根容器拦截...

网友评论

      本文标题:百分比列表滑动选择

      本文链接:https://www.haomeiwen.com/subject/kvbkdctx.html