微信小程序—通知栏文字从左到右无限接滚动
wxml
<view class="marquee_box"> <text class="marquee_text" style="transform: translateX(-{{marqueeDistance}}rpx)" >{{text}}</text> </view>wxss
.marquee_box{ width: 580rpx; height: 38rpx; position:relative; color:#1eb1b8; display:block; overflow:hidden;} .marquee_text{ height: 38rpx; line-height: 38rpx; white-space: nowrap; position: absolute; top: 0; font-size: 22rpx;}js
data: {// 通知 text: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX123', marqueePace: 1,//滚动速度 marqueeDistance: 0,//初始滚动距离 size: 22, interval: 20 // 时间间隔},onShow: function () { var that = this; var length = that.data.text.length * that.data.size;//文字长度 var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度 that.setData({ length: length, windowWidth: windowWidth }); that.scrollFn();// 第一个字消失后立即从右边出现 }, scrollFn: function () { var that = this; var length = that.data.length;//滚动文字的宽度 var windowWidth = that.data.windowWidth;//屏幕宽度 if (length > windowWidth) { var interval = setInterval(function () { var crentleft = that.data.marqueeDistance; if (crentleft < 550) {//判断是否滚动到最大宽度 that.setData({ marqueeDistance: crentleft + that.data.marqueePace }) } else { that.setData({ marqueeDistance: 0 // 直接重新滚动 }); clearInterval(interval); that.scrollFn(); } }, that.data.interval); }参考链接
小程序
