本想使用swiper实现功能,但是其中一个需要被切换的元素是地图页,滑动的时候会影响地图,想屏蔽手动滑动,只点击tab滑动,但是却把地图的滑动页屏蔽掉了。所以放弃这个方法,采用小程序的animation实现。
步骤:
1、创建一个动画实例
var animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
delay: 0
});
2、调用实例的方法来描述动画
animation.opacity(0.2).translate(100, -100).step()
3、通过动画实例的export方法导出动画数据传递给组件的animation属性
this.setData({
ani: animation.export()
})
代码:
<view class='e_box' animation="{{donghua}}">
<view class='e_box2' animation="{{donghua2}}">
data:{
donghua: "",
donghua2: ""
}
if (e.currentTarget.dataset.way=='0'){
this.setData({
donghua: animation.left('0%').step().export(),
donghua2: animation.left('100%').step().export()
})
}
if (e.currentTarget.dataset.way == '1') {
this.setData({
donghua: animation.left('-100%').step().export(),
donghua2: animation.left('0%').step().export()
})
}
点击tab 可实现e_box 和 e_box2的滑动切换效果