当先锋百科网

首页 1 2 3 4 5 6 7

本想使用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的滑动切换效果