wxml
<swiper current="{{swiperIndex}}" circular vertical class="marquee-swiper" bindchange="onSwiperChange" wx:if="{{list.length}}">
<block wx:for="{{list}}">
<swiper-item>
<scroll-view class="text-item" lower-threshold="{{0}}" scroll-left="{{swiperIndex == index?scrollLeft:0}}"
bindscrolltolower="_changeSwiperIndex" scroll-x showScrollbar="{{false}}" paingEnabled style="color:{{color}};font-size: {{size}}rpx;height:{{height}}rpx;line-height:{{height}}rpx">{{item}}</scroll-view>
</swiper-item>
</block>
</swiper>
<!-- 不显示，用于获取文字宽度 -->
<text class="roule-box" style="font-size: {{size}}rpx;">{{list[swiperIndex]}}</text>
</view>
wxss
.marquee-swiper{
height: 100%;
}
.text-item{
box-sizing: border-box;
padding:0 20rpx;
white-space: nowrap;
}
.roule-box{
position: fixed;
top:-10000px;
opacity: 0;
z-index: -1000;
white-space: nowrap;
padding:0 20rpx;
}
js
// components/marquee.js
Component({
/**
* 组件的属性列表
*/
properties: {
list: {
type: Array,
value: []
},
speed: {
type: Number,
value: 5,
},
width: {
type: Number,
value: 690,
},
height: {
type: Number,
value: 50,
},
size: {
type: Number,
value: 24
},
color: {
type: String,
value: "#fff"
},
borderRaduis: {
type: Boolean,
value: true
},
bgColor: {
type: String,
value: ""
}
},
/**
* 组件的初始数据
*/
data: {
ratio: wx.getStorageSync('ratio'),
swiperIndex: 0,
scrollLeft: 0
},
/**
* 组件的方法列表
*/
methods: {
onSwiperChange(e) {
if (e.detail.source == 'touch') {
this.setData({
scrollLeft: 0,
swiperIndex: e.detail.current,
})
}
},
//下一条
_changeSwiperIndex() {
clearInterval(this._timer)
setTimeout(() => {
this.setData({
scrollLeft: 0
})
if (this.data.swiperIndex == this.data.list.length - 1) {
this.setData({
swiperIndex: 0
})
} else {
this.setData({
swiperIndex: this.data.swiperIndex + 1
})
}
setTimeout(() => {
this._scrolling()
}, 1000)
}, 1000)
},
//左右滚动
_scrolling() {
let that = this
//创建节点选择器 获取文字在页面的宽度，如果大于容器宽度，开始滚动，否则等待两秒，切换下一条
var query = this.createSelectorQuery();
//选择class id
query.select('.roule-box').boundingClientRect(function (rect) {
if (rect.width > that.data.width * that.data.ratio) {
that._timer = setInterval(() => {
that.setData({
scrollLeft: that.data.scrollLeft + 1
})
}, 33);
} else {
setTimeout(() => {
that._changeSwiperIndex()
}, 2000)
}
}).exec();
},
},
lifetimes: {
attached() {
setTimeout(() => {
this._scrolling()
}, 1000)
},
detached(){
clearInterval(this._timer)
}
}
})
