美文网首页
微信小程序movable-view,bindchange、ani

微信小程序movable-view,bindchange、ani

作者: xiesen | 来源:发表于2020-10-27 11:34 被阅读0次

    问题:在使用movable-view时,bindchange改变时,启用的animation,导致初始化不能赋值
    决绝: 赋值时animation为false,bindchange时animation为true(你可以试试直接设置animation为false,死机思密达)

    自定义.png

    index.js

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        _x: 0,
        number: 0,
        isAnimation: false //animation设置为false
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        this.setData({
          _x: 100
        })
      },
      onChange: function(e) {
        //bindchange时,animation设置为true
        this.data._x = e.detail.x
        this.data.number = this.accurate2hundredth(e.detail.x/275)
        this.setData({
          isAnimation: true,
          _x: this.data._x,
          number: this.data.number
        })
      },
      accurate2hundredth: function (num) {
        console.log(num)
        var p = num.toString().indexOf('.');
        var r = 0;
        if (p > 0) {
          r = ('' + num).substring(0, p + 3);
        }
        else {
          r = num + '.00';
        }
        let number =  r*100
        if(number>100){
          number = 100
        }
        return Math.round(number);
      }
    })
    

    index.wxml

    <view class="warp">
      <view class="padding bg-white" style="padding: 20rpx 50rpx;text-align: center;">
        <view class="below-div">
          <view class="in-div" style="width:{{_x}}px;"></view>
        </view>
      </view> 
      <movable-area class="movable">
        <movable-view direction="horizontal" animation="{{isAnimation}}" bindchange="onChange" x="{{_x}}" style="width:40rpx;height:40rpx;"><image src="../images/controls/movable-btn.png" style="width:40rpx;height:40rpx"></image></movable-view>
      </movable-area>
    </view>
    

    index.wxss

    .warp{
      background: #FFFFFF; 
      height:100vh;
      text-align: center;
    }
    .movable{
      width: 300px;
      position: relative;
      top: -48rpx;
      text-align: center;
      margin: 0 auto;
    }
    .header{
      font-size: 30rpx;
      font-weight: 500;
      color: #333333;
      padding-left: 40px;
      text-align: left;
    }
    .below-div{
      width: 280px;
      height: 16rpx;
      background: #EBEBEB;
      text-align: center;
      border-radius: 8rpx;
      margin: 0 auto;
    }
    .in-div{
      height: 16rpx;
      background: linear-gradient(90deg,  #FEB442, #FE5C3F);
      border-radius: 8rpx;
    }
    

    相关文章

      网友评论

          本文标题:微信小程序movable-view,bindchange、ani

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