微信小程序文字轮播

wxml:
<view class="scorll" animation="{{animationData}}" bindtransitionend='animationend'>{{weatherWarn.title}}</view> 

js:
 initAnimation: function(text){
    const animation = wx.createAnimation({
      duration: 5000,// 动画时长:5s
      timingFunction: 'linear',// 匀速
    });
    animation.translateX(parseInt(-130)).step();// -130,向左滚动130px
    this.setData({
      animationData: animation.export(), // 此处为动画
      animation: animation // 此处为方法
    });
  },
  animationend() {
    let that = this;
    // 复位容器的位置,准备开始下一次动画
    that.data.animation.translateX(120).step({duration: 0}); 
    that.setData({
        animationData: that.data.animation.export()
    }, ()=>{
      //开始新一轮动画
        let animation = wx.createAnimation({
            //此处以公告最长内容来设置动画持续时间(duration:决定整个动画播放的速度)
            duration: 8000,
            timingFunction: 'linear'
        });
        animation.translateX(-130).step();// -130代表向左滚动130px
        that.setData({
            animationData: animation.export()
        });
    });
},

因为页面上放的是文字所以就是文字的横向轮播,方向内容都是可以自己更改的

引用:小程序横向滚动公告 无限循环播放动画 | 微信开放社区 (qq.com)

posted @ 2021-09-15 18:17  妄欢  阅读(689)  评论(0编辑  收藏  举报