微信小程序 文字从左往右重复滚动
时间: 2023-09-15 16:21:52 浏览: 150
要实现微信小程序中文字从左往右重复滚动的效果,可以使用 `animation` 动画和 `wx.createSelectorQuery()` 方法获取元素宽度。
以下是示例代码:
```
// 获取元素宽度
wx.createSelectorQuery().select('.scroll-text').boundingClientRect(function(rect) {
var width = rect.width;
// 创建动画
var animation = wx.createAnimation({
duration: 5000,
timingFunction: 'linear'
})
// 设置动画
animation.translateX(-width).step();
animation.translateX(width).step({ duration: 0 });
// 播放动画
this.setData({
animationData: animation.export()
})
}).exec()
// 在页面中添加一个 scroll-text 元素,并设置样式
<view class="scroll-text" style="white-space: nowrap; overflow: hidden;">文字内容</view>
// 在页面中添加一个 animation 元素,并绑定动画
<animation class="animation" animation="{{animationData}}"></animation>
```
在样式中设置 `white-space: nowrap; overflow: hidden;` 可以让文字不换行且超出部分隐藏。通过 `animation.translateX()` 方法设置元素的水平位移,再通过 `animation.step()` 方法创建动画步骤,最后通过 `animation.export()` 方法输出动画,绑定到页面元素的 `animation` 属性上即可实现文字从左往右重复滚动的效果。
阅读全文