一、概述:
由于小程序里面使用的都是变量控制,所以使用起来比较难掌握,今天做了一个文字从右向左滚动的实例,写法比较简单。效果如下图所示:
二、实现过程:
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;}