本文实例为大家分享了微信小程序scroll-view实现字幕滚动的具体代码，供大家参考，具体内容如下
需求：
解决方案：
demo:nofollow" target="_blank" href="https://github.com/yapeee/wx-text-rolling-demo">字幕滚动
通过控制滑动条来完成字幕滚动，通过setinterval完成字幕循环滚动。
wxml:
wxss:
.txt-light {
color: #acadbe;
}
color: #acadbe;
}
.blank {
height: 150rpx;
}
js
/**
- 页面的初始数据
*/
data: {
scrollTop:0
},/** - 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},/**
- 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},/**
- 生命周期函数--监听页面显示
*/
onShow: function () {
// 获取scroll-view的节点信息
//创建节点选择器
var query = wx.createSelectorQuery();
query.select('.container').boundingClientRect()
query.select('.list').boundingClientRect()
query.exec((res) => {
var containerHeight = res[0].height;
var listHeight = res[1].height;
// 滚动条的高度增加
var interval = setInterval(() => {
if (this.data.scrollTop < listHeight - containerHeight) {
this.setData({
scrollTop: this.data.scrollTop + 10
})
} else {
// clearInterval(interval);
this.setData({
scrollTop: 0
})
}
},1000)
})
},scroll: function () {
// 获取scroll-view的节点信息
//创建节点选择器
var query = wx.createSelectorQuery();
query.select('.list').boundingClientRect()
query.exec((res) => {
this.setData({
scrollTop: -(res[0].top)
})
// console.log(res);
})
}
})
tips:此次字幕滚动，即可自动滚动，也可拖动。
