效果图:
wxml代码
<!-- 广播 -->
<view class='notice'>
<view class="left-box">
<view class="left-text">
<image src="/assets/annou.png" style="width: 40rpx;height: 40rpx;"></image>
</view>
<view class='content-box'>
<view class='content-text' animation="{{animationData}}"><text id="text">{{text}}</text></view>
</view>
<view class="right-text"></view>
</view>
</view>
</view>
js代码
Page({
data: {
// 广播
text: "1.【评分标准】页可以查看不同年龄段的评分标准,通过首页选择对应的性别、类别和年龄。2.【单项成绩】页包含了详细的单项打分情况及成绩雷达图,直观地看出自己的弱项和强项。",
animation: null,
timer: null,
duration: 0,
textWidth: 0,
wrapWidth: 0,
},
onShow() {
this.initAnimation(this.data.text);//关掉广播
},
onHide() {
//关掉广播
this.destroyTimer();
this.setData({
timer: null
})
},
onUnload() {
//关掉广播
this.destroyTimer()
this.setData({
timer: null
})
},
//卸载定时器
destroyTimer() {
if (this.data.timer) {
clearTimeout(this.data.timer);
}
},
//开启公告字幕滚动动画
initAnimation() {
let that = this
this.data.duration = 15000
this.data.animation = wx.createAnimation({
duration: this.data.duration,
timingFunction: 'linear'
})
let query = wx.createSelectorQuery()
query.select('.content-box').boundingClientRect()
query.select('#text').boundingClientRect()
query.exec((rect) => {
that.setData({
wrapWidth: rect[0].width,
textWidth: rect[1].width
}, () => {
this.startAnimation()
})
})
},
// 定时器动画
startAnimation() {
const resetAnimation = this.data.animation.translateX(this.data.wrapWidth).step({ duration: 0 })
this.setData({
animationData: resetAnimation.export()
})
const animationData = this.data.animation.translateX(-this.data.textWidth).step({ duration: this.data.duration })
setTimeout(() => {
this.setData({
animationData: animationData.export()
})
}, 100)
const timer = setTimeout(() => {
this.startAnimation()
}, this.data.duration)
this.setData({
timer
})
},
})
wxss代码
/* 广播 */
.notice {
position: relative;
width: 100%;
margin-top: 60rpx;
display: flex;
align-content: center;
justify-content: space-between;
padding: 10rpx 25rpx;
background: #f1f1f1;
}
.left-box {
position: relative;
width:100%;
display: flex;
align-items: center;
}
.left-text {
position: absolute;
left: 0;
width: 40rpx;
height: 100%;
background: #f1f1f1;
z-index: 99;
}
.right-text {
position: absolute;
right: -1rpx;
width: 40rpx;
height: 100%;
background: linear-gradient(to left,rgba(241,241,241,1),rgba(241,241,241,0));
z-index: 99;
}
.content-box {
overflow: hidden;
width: calc(100% - 60rpx);
}
.content-text {
color: #5e5e5e;
white-space: nowrap;
font-size: 28rpx;
}