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

2020-10-27  本文已影响0人  xiesen

问题:在使用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;
}
上一篇 下一篇

猜你喜欢

热点阅读