java从左到右文字滚动_小程序 文字从右往左无限滚动

一、概述：

由于小程序里面使用的都是变量控制，所以使用起来比较难掌握，今天做了一个文字从右向左滚动的实例，写法比较简单。效果如下图所示：

二、实现过程：

1、解决思路：

一共两个text控件，当第一个text滚动完后应该是看到第二个text控件了，但是在这个时候最好的方法不是让它滚完，而是用重新又从第一个text控件开始滚动，控制起来超级简单，基本实现了跑马灯的效果，另外加了一个如果文字不足一屏，不执行跑马灯的效果，而且添加了超大的间距，解决不会显示重复内容。以下是各部分完整代码，只要复制代码添加到相应页面即可看到效果。

2、小程序布局页面wxml

{ {text}}

{ {text}}

3、小程序样式页面 wxss

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

.scrolltxt{padding:0 20rpx;background:#f8f8f8;}

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