微信小程序实现文字从右向左无限滚动_微信小程序实现文字从右向.pdfVIP

微微信信小小程程序序实实现现文文字字从从右右向向左左无无限限滚滚动动

主要介绍了微信小程序实现文字从右向左无限滚动

本文实例为大家分享了微信小程序实现文字无限滚动的具代码，供大家参考，具内容如下

布局页面wxml

scroll-viewclass=container

viewclass=scrolltxt

viewclass=marquee_box

viewclass=marquee_textstyle=transform:translateX(-{{marqueeDistancepx)

text{{text/text

textstyle=margin-right:{{marquee_marginpx;/text

textstyle=margin-right:{{marquee_marginpx;{{text/text

/view

/view

/view

/scroll-view

样式页面wxss

.container{height:100%;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;

.scrolltxt{padding:020rpx;background:#f8f8f8;

.marquee_box{position:relative;color:#333;height:90rpx;display:block;overflow:hidden;

.marquee_text{white-space:nowrap;position:absolute;top:0;font-size:14px;height:90rpx;line-height:90rpx;

小程序js页面

Page({

/**

*页面的初始数据

*L

*/

data:{

text:这是一条测试公告，看看效果怎么样，2019年3月23日,

marqueePace:1,//滚动速度

marqueeDistance:0,//初始滚动距离

marquee_margin:30,

size:14,

interval:20//时间间隔

,

/**

*生命周期函数--监听页面加载

*/

onLoad:function(options){

,

onShow:function(){

varthat=this;

varlength=that.data.text.length*that.data.size;//文字长度

varwindowWidth=wx.getSystemInfoSync().windowWidth;//屏幕宽度

//console.log(length,windowWidth);

that.setData({

length:length,

windowWidth:windowWidth

);

that.scrolltxt();//第一个字消失后立即从右边出现

,

scrolltxt:function(){

varthat=this;

varlength=that.data.length;//滚动文字的宽度

varwindowWidth=that.data.windowWidth;//屏幕宽度

if(lengthwindowWidth){

varinterval=setInterval(function(){

varmaxscrollwidth=length+that.data.marquee_margin;//滚动的最大宽度，文字宽度+间距，如果需要一行文字滚完后再显示第二行可以修改marquee_margin值等于windowWidth即可

varcrentleft=that.data.marqueeDistance;

if(crentleftmaxscrollwidth){//判断是否滚动到最大宽度

that.setDat