一、上下滚动效果
实现方法：利用小程序组建swiper实现上下循环滚动（为了美观，wxss中我增加了高度和背景色）。
- wxml
<swiper class='swiper-box' autoplay='{{true}}' interval='2000' vertical='{{true}}' circular='{{true}}'>
<swiper-item class='item' wx:for='{{txtlist}}'>{{index + 1}}、{{item}}</swiper-item>
</swiper>
- wxss
.swiper-box{
position: relative;
height: 80rpx;
line-height: 80rpx;
padding: 0 40rpx;
background-color: #FFEBCD;
overflow: hidden;
}
.swiper-box .item{
white-space: nowrap;
text-overflow: ellipsis;
}
- js
Page({
data: {
txtlist: [
'这是第一条公告内容',
'小程序上下滚动效果总结',
'这是一行上下滚动的文字，文字最好短点，超过一行省略'
]
}
})
二、水平滚动效果
实现方法：下面我总结了三种方法：1）是利用CSS3中keyframes实现的，效果是文字从屏幕右边开始向左滚动；2）文字从屏幕左边向左滚动，滚动完成后从屏幕右边开始再向左滚动，以此循环；3）文字展示两次，两段文字之间设置适当的间距，从右向左开始滚动，当第二条文字滚动到屏幕左边时设置重新滚动。
- wxml
<view class='wp'>
<!-- 纯css实现 -->
<view class='box'>
<view id='txt1' class='txt' style='animation: roll linear {{duration}}s infinite;'>{{text}}</view>
</view>
<!-- 显示完后再显示 -->
<view class='box'>
<view id='txt2' class='txt' style='left: {{posLeft1}}px'>{{text}}</view>
</view>
<!-- 出现空白后就显示 -->
<view class='box'>
<view class='flex-box' style='left: {{posLeft2}}px'>
<view id='txt3' class='txt'>{{text}}</view>
<view class='txt' style='margin-left: {{marginLeft}}px'>{{text}}</view>
</view>
</view>
</view>
- wxss
.box{
position: relative;
width: 100%;
height: 80rpx;
line-height: 80rpx;
overflow: hidden;
}
.txt{
white-space: nowrap;
}
#txt1{
position: relative;
white-space: nowrap;
overflow: hidden;
transition: left 1s linear;
}
#txt2,.flex-box{
position: absolute;
top: 0;
}
.flex-box{
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
}
@keyframes roll {
0% {left: 750rpx;}
100% {left: -100%;}
}
- js
let interval1,interval2;
Page({
data: {
text: '这是一行文字水平滚动效果，在小程序中实现的', //滚动文字
duration: 0, //水平滚动方法一中文字滚动总时间
pace: 1, //滚动速度
posLeft1: 0, //水平滚动方法二中left值
posLeft2: 0, //水平滚动方法三中left值
marginLeft: 60 //水平滚动方法三中两条文本之间的间距
},
roll1: function (that, txtLength, windowWidth) {
interval1 = setInterval(function() {
if (-that.data.posLeft1 < txtLength) {
that.setData({
posLeft1: that.data.posLeft1 - that.data.pace
})
} else {
that.setData({
posLeft1: windowWidth
})
}
}, 20)
},
roll2: function (that, txtLength, windowWidth) {
interval2 = setInterval(function () {
if (-that.data.posLeft2 < txtLength + that.data.marginLeft) {
that.setData({
posLeft2: that.data.posLeft2 - that.data.pace
})
} else { // 第二段文字滚动到左边后重新滚动
that.setData({
posLeft2: 0
})
clearInterval(interval2);
that.roll2(that, txtLength, windowWidth);
}
}, 20)
},
onShow: function () {
let that = this;
let windowWidth = wx.getSystemInfoSync().windowWidth; //屏幕宽度
wx.createSelectorQuery().select('#txt1').boundingClientRect(function (rect) {
let duration = rect.width * 0.03;//滚动文字时间,滚动速度为0.03s/px
that.setData({
duration: duration
})
}).exec()
wx.createSelectorQuery().select('#txt2').boundingClientRect(function (rect) {
let txtLength = rect.width;//滚动文字长度
that.roll1(that, txtLength, windowWidth);
}).exec()
wx.createSelectorQuery().select('#txt3').boundingClientRect(function (rect) {
let txtLength = rect.width;//文字+图标长度
that.setData({
marginLeft: txtLength < windowWidth - that.data.marginLeft ? windowWidth - txtLength : that.data.marginLeft
})
that.roll2(that, txtLength, windowWidth);
}).exec()
},
onHide: function() {
clearInterval(interval1);
clearInterval(interval2);
}
})
