微信小程序文字跑马灯

效果

wxml

<view>1 显示完后再显示view>
<view class&＃61;"example"><view class&＃61;"marquee_box"><view class&＃61;"marquee_text" style&＃61;"{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">{{text}}view>view>
view>
<view>2 出现白边后即显示view>
<view class&＃61;"example"><view class&＃61;"marquee_box"><view class&＃61;"marquee_text" style&＃61;"{{orientation}}:{{marqueeDistance2}}px;font-size: {{size}}px;"><text>{{text}}text><text wx:if&＃61;"{{marquee2copy_status}}" style&＃61;"margin-left:{{marquee2_margin}}px;">{{text}}text>view>view>
view>

wxss

.example {display: block;width: 100%;height: 100rpx;
}.marquee_box {width: 100%;position: relative;
}.marquee_text {white-space: nowrap;position: absolute;top: 0;
}


js

// pages/home/marquee/marquee.js
Page({data: {text: &＃39;这是一条会滚动的文字滚来滚去的文字跑马灯&＃xff0c;哈哈哈哈哈哈哈哈&＃39;,marqueePace: 1,//滚动速度marqueeDistance: 0,//初始滚动距离marqueeDistance2: 0,marquee2copy_status: false,marquee2_margin: 60,size: 14,orientation: &＃39;left&＃39;,//滚动方向interval: 20 // 时间间隔},onShow: function () {// 页面显示var vm &＃61; this;var length &＃61; vm.data.text.length * vm.data.size;//文字长度var windowWidth &＃61; wx.getSystemInfoSync().windowWidth;// 屏幕宽度vm.setData({length: length,windowWidth: windowWidth,marquee2_margin: length < windowWidth ? windowWidth - length : vm.data.marquee2_margin//当文字长度小于屏幕长度时&＃xff0c;需要增加补白});vm.run1();// 水平一行字滚动完了再按照原来的方向滚动vm.run2();// 第一个字消失后立即从右边出现},run1: function () {var vm &＃61; this;var interval &＃61; setInterval(function () {if (-vm.data.marqueeDistance < vm.data.length) {vm.setData({marqueeDistance: vm.data.marqueeDistance - vm.data.marqueePace,});} else {clearInterval(interval);vm.setData({marqueeDistance: vm.data.windowWidth});vm.run1();}}, vm.data.interval);},run2: function () {var vm &＃61; this;var interval &＃61; setInterval(function () {if (-vm.data.marqueeDistance2 < vm.data.length) {// 如果文字滚动到出现marquee2_margin&＃61;30px的白边&＃xff0c;就接着显示vm.setData({marqueeDistance2: vm.data.marqueeDistance2 - vm.data.marqueePace,marquee2copy_status: vm.data.length &＃43; vm.data.marqueeDistance2 <&＃61; vm.data.windowWidth &＃43; vm.data.marquee2_margin,});} else {if (-vm.data.marqueeDistance2 >&＃61; vm.data.marquee2_margin) { // 当第二条文字滚动到最左边时vm.setData({marqueeDistance2: vm.data.marquee2_margin // 直接重新滚动});clearInterval(interval);vm.run2();} else {clearInterval(interval);vm.setData({marqueeDistance2: -vm.data.windowWidth});vm.run2();}}}, vm.data.interval);}
})