第一种,CSS实现跑马灯效果
<view style="flex: 1;">
<view id="noticeItem" class="notice_item_style">
{{item.title}}
</view>
</view>
.notice_item_style {
-webkit-animation: marqueeText 5s linear 1s infinite;
animation: marqueeText 5s linear 1s infinite,marqueeText2 5s linear 6s infinite;//两个动画连续使用
white-space: nowrap;
}
@keyframes marqueeText {
from {
transform: translateX(0%);
-webkit-transform: translateX(0%);
}
to {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
@keyframes marqueeText2 {
from {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
to {
transform: translateX(0%);
-webkit-transform: translateX(0%);
}
}
第二种,单独的组件
marquee.wxml
<!--pages/component/marquee/index.wxml-->
<scroll-view class="marquee-container">
<view class="scroll-txt">
<view class="marquee-box">
<view class="marquee-text" style="transform: translateX(-{{ marqueeDistance }}px)">
<text>{{ marqueeText }}</text>
<text style="margin-right:{{ marqueeMargin }}px;"></text>
<text style="margin-right:{{ marqueeMargin }}px;">{{ marqueeText }}</text>
</view>
</view>
</view>
</scroll-view>
marquee.js
// pages/component/marquee/index.js
Component({
properties: {
marqueeText: {
type: String,
value: ''
},
textSize: {
type: Number,
value: 12 // 单位 rpx
},
marqueePace: { // 滚动速度
type: Number,
value: 1,
},
marqueeMargin: { //滚动条每次出现时距离左边位置,默认屏幕宽度
type: Number,
value: 50
},
swiperWidth:{
type:Number,
value:0
}
},
data: {
marqueeDistance: 50, //初始滚动距离
timer: '',// 定时器
},
attached() {
this.init();
},
methods: {
init() {
const { marqueeText, textSize } = this.data;
const textLength = marqueeText.length * textSize;
// const { windowWidth } = wx.getSystemInfoSync()
// this.setData({ textLength, windowWidth });
this.setData({ textLength });
this.scrollTxt();
},
scrollTxt() {
let { textLength, swiperWidth, timer, marqueeMargin, marqueePace } = this.data;
if (textLength > swiperWidth) {
timer = setInterval(() => {
const maxScrollWidth = textLength + marqueeMargin;
const left = this.data.marqueeDistance;
if (left < maxScrollWidth) {
this.setData({ marqueeDistance: left + marqueePace });
} else {
this.setData({ marqueeDistance: 0 });
clearInterval(timer);
this.scrollTxt();
}
}, 20);
} else {
this.setData({ marqueeMargin: '1000' });
}
this.setData({ timer });
}
},
pageLifetimes: {
show() {
this.init();
},
hide() {
clearInterval(this.data.timer);
},
}
});
marquee.wxss
/* pages/component/marquee/index.wxss */
.marquee-container {
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
height: 100%;
}
.scroll-txt {
padding: 0 20rpx;
}
.marquee-box {
position: relative;
display: block;
}
.marquee-text {
position: absolute;
top: 0;
white-space: nowrap;
}
marquee.json
{
"component": true
}
在页面中使用
<marquee-text class="notice-text" marqueeText="{{item.title}}" swiperWidth="{{swiperWidth}}" textSize="{{18}}" marqueePace="1"></marquee-text>
swiperWidth的值:
var obj = wx.createSelectorQuery();
obj.select('#noticeSwiper').boundingClientRect(function (rect) {
console.log('marquee',rect)
// console.log(rect[0].width)
that.setData({
swiperWidth:rect.width
})
})
obj.exec() ;