自定义.png问题:在使用movable-view时,bindchange改变时,启用的animation,导致初始化不能赋值
决绝: 赋值时animation为false,bindchange时animation为true(你可以试试直接设置animation为false,死机思密达)
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;
}
网友评论