小程序文字跑马灯效果

本文实例为大家分享了小程序文字跑马灯效果的具体代码，供大家参考，具体内容如下

market.wxml

！-页数/市场/市场。wxml-视图1显示完后再显示/view view class=' example ' view class=' marquee _ box ' view class=' marquee _ text ' style=' { { orientation } } : { { marqueeDistance } } px；font-size : { { size } } px'{ { text } }/view/view/view view view 2出现白边后即显示/view view class=' example ' view class=' marquee _ box ' view class=' marquee _ text ' style=' { { orientation } } : { { marqueedistance 2 } } px；font-size : { { size } } px'text { { text } }/text text wx : if=' { { marquee 2 copy _ status } } ' style=' margin-left : { { marquee 2 _ margin } } px；'{ { text } }/text/view/view/view market。页面样式表

/* page/market/market . wxss */.示例{显示：块；宽度： 100%;高度： 100 rpx} .marquee _ box {宽度： 100%；相对位置：} .marquee _ text { white-space : nowrap；绝对位置：top : 0；}js:

页面({数据： {文本： }这是一条会滚动的文字滚来滚去的文字跑马灯，哈哈哈哈哈哈哈哈，marqueePace: 1，//滚动速度marqueeDistance: 0，//初始滚动距离marqueeDistance2: 0，marquee2copy _ status: false，marquee2 _ margin: 60，size: 14，orientation: 'left '，//滚动方向interval: 20 /时间间隔}，onShow:函数(){ //页面显示var vm=这个；可变长度=虚拟机。数据。文字。长度* VM。数据。大小；//文字长度var windowWidth=wx。getsysteminfosync().windowWidth//屏幕宽度vm.setData({ length: length，windowWidth: windowWidth，marquee 2 _ margin : length window width？窗口宽长： VM。数据。字幕2 _边距/当文字长度小于屏幕长度时，需要增加补白});虚拟机。run 1()；//水平一行字滚动完了再按照原来的方向滚动虚拟机。run 2()；//第一个字消失后立即从右边出现}，运行1:函数(){ var VM=thisvar interval=setInterval(function(){ if(-VM。数据。marqueedistance VM。数据。长度){ VM。setdata({ marqueediinstance e : VM。数据。marqueedistance-VM。数据。marqueepace，})；} else { clearInterval(interval)；虚拟机。setdata({ marqueedistance : VM。数据。窗口宽度})；虚拟机。run 1()；} }，VM。数据。间隔)；}，运行2:函数(){ var VM=thisvar interval=setInterval(function(){ if(-VM。数据。Marqueedistance 2 VM。数据。长度){//如果文字滚动到出现marquee2_margin=30px的白边，就接着显示虚拟机。setdata({ marqueedistance 2: VM。数据。marqueedistance 2-VM。数据。marqueepace，marquee2copy _ status : VM。数据。虚拟机长度。数据。marqueedistance 2=VM。数据。窗口宽度VM。数据。marquee2 _ margin，})；} else { if(-VM。数据。marqueedistance 2=VM。数据。跑马灯2 _ margin){//当第二条文字滚动到最左边时虚拟机。setdata({ marqueedistance 2: VM。数据。字幕2 _边距/直接重新滚动});clearInterval(区间);虚拟机。run 2()；} else { clearInterval(interval)；虚拟机。setdata({ marqueedistance 2:-VM。数据。窗口宽度})；虚拟机。run 2()；} } }，VM。数据。间隔)；}})效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。