微信小程序文字轮播
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() }); }); },
因为页面上放的是文字所以就是文字的横向轮播,方向内容都是可以自己更改的