<view class=“example”>
<view class=“marquee_box”>
<view class=“marquee_content” style="{{orientation}}:{{marqueeDistance}}rpx;font-size: {{size}}rpx;">
{{content}}
</view>
</view>
</view>
Component({
/**
* 组件的属性列表
*/
properties: {
marqueeList: {
type: Array,
value: null,
observer: function (newVal) {
if (newVal instanceof Array && newVal.length > 0) {
this.initMarquee()
}
}
},
orientation: {
type: String,
value: ‘left’
},
size: {
type: Number,
value: 28
}
},
/**
* 组件的初始数据
*/
data: {
content: ‘’,
// content: ‘这是一条会滚动的文字滚来滚去的文字跑马灯，哈哈哈哈哈哈哈哈’,
marqueePace: 2,//滚动速度
// marqueeDistance: 750,//初始滚动距离
interval: 20,// 时间间隔
count: 0
},
/**
* 组件的方法列表
*/
methods: {
run1: function () {
var that = this;
var timeout = setTimeout(function () {
if (that.data.marqueeDistance > -that.data.length) {//记住是right从0开始
that.setData({
marqueeDistance: that.data.marqueeDistance - that.data.marqueePace,
});
// that.data.marqueeDistance == 750 - (that.data.length - that.data.length % that.data.marqueePace)
if (that.data.marqueeDistance == 750 % that.data.marqueePace + 2 * that.data.marqueePace) {
setTimeout(function () {
that.run1();
}, that.data.marqueeList[that.data.count].showTime * 1000)
} else {
that.run1();
}
} else {
//一个回合结束,更新count
var count = that.data.count;
if (++count > that.data.marqueeList.length - 1) {
count = 0
}
that.setData({
count: count
})
that.initMarquee()
}
}, that.data.interval);
},
initMarquee: function () {
var that = this;
var marqueeData = that.data.marqueeList[that.data.count]
that.setData({
length: marqueeData.content.length * that.data.size,
marqueeDistance: 750,
content: marqueeData.content,
marqueePace: 750 * that.data.interval / 1000 / marqueeData.moveTime
});
that.run1();// 水平一行字滚动完了再按照原来的方向滚动
}
}
})
强力驱动