⼩程序两种滚动公告栏的实现⽅法
先上效果图：
横向滚动栏实现
⽹上的⼏种⽅案或多或少都有⼀些问题：
1.setData定时器更新text view的margin-left⽅法，由于setData的毫秒延时，动画播放起来⼀卡⼀卡；
2.纯CSS实现，keyframe等，⽆法实现循环播放的设置；
3.使⽤string.length*font-size的⽅法获取字符串像素长度，不够精确，多次循环播放后误差会累积变⼤。
我采⽤的animate动画⽅法，实测动画流畅，循环播放⽆误差。
wxml
/
/ wxml
<view class='notice'>
<view class="left">
<text class='iconfont icon-labagonggao voice'></text>
<view class="left-box">
<view class="left-text"></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 class="right" bindtap="goApp">
<!-- <image class="app" mode="aspectFit" src="/assets/images/app.png" bindload="imageLoad"></image> -->    <text class="more">更多应⽤></text>
</view>
</view>
wxss
// wxss
.notice {
display: flex;
align-content: center;
justify-content: space-between;
padding: 10rpx 25rpx;
background: #f1f1f1;
}
.left {
display: flex;
align-items: center;
}
.voice {
margin-right: 5rpx;
margin-top: 2rpx;
}
.
left-box {
position: relative;
display: flex;
align-items: center;
}
.left-text {
position: absolute;
left: 0;
width: 40rpx;
timeout on t2 timer
height: 100%;
background: linear-gradient(to left,rgba(241,241,241,0),rgba(241,241,241,1));
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: 350rpx;
}
.content-text {
color: #5e5e5e;
white-space: nowrap;
font-size: 28rpx;
}
.right {
display: flex;
align-items: center;
}
.app {
height: 48rpx;
}
.more {
margin-left: 5rpx;
color: #aaa;
font-size: 32rpx;
}
js
// js
data: {
text: "1.【评分标准】页可以查看不同年龄段的评分标准，通过⾸页选择对应的性别、类别和年龄。2.【单项成绩】页包含了详细的单项打分情况及成绩雷达图，直观    animation: null,
timer: null,
duration: 0,
textWidth: 0,
wrapWidth: 0
onShow() {
this.initAnimation()
},
onHide() {
this.destroyTimer()
this.setData({
timer: null
})
},
onUnload() {
this.destroyTimer()
this.setData({
timer: null
})
},
destroyTimer() {
if (this.data.timer) {
clearTimeout(this.data.timer);
}
},
/**
* 开启公告字幕滚动动画
* @param  {String} text 公告内容
* @return {[type]}
*/
initAnimation(text) {
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()
<((rect) => {
that.setData({
wrapWidth: rect[0].width,
textWidth: rect[1].width
}, () => {
this.startAnimation()
})
})
},
// 定时器动画
startAnimation() {
//reset
// this.data.ansition.duration = 0
const resetAnimation = this.anslateX(this.data.wrapWidth).step({ duration: 0 })
this.setData({
animationData: port()
})
// this.data.ansition.duration = this.data.duration
const animationData = this.anslateX(-Width).step({ duration: this.data.duration })    setTimeout(() => {
this.setData({
animationData: port()
})
}, 100)
const timer = setTimeout(() => {
this.startAnimation()
}, this.data.duration)
this.setData({
timer
},
sipwer滚动⽅式代码如下所⽰
swiper默认为横向滚动，vertical为true，则纵向滚动
wxml
// wxml
<!-- 公告 -->
<text class='swiper-notice'>公告：</text>
<swiper class='swiper-container' autoplay='true' vertical='true' circular='true' interval='2000'>    <block wx:for='{{msgList}}'>
<navigator url='/pages/notice/notice?title={{item.url}}' open-type='navigate'>
<swiper-item>
<view class='swiper-item'>{{item.title}}</view>
</swiper-item>
</navigator>
</block>
</swiper>
<!-- 公告 end -->
wxss
// wxss
/* 公告start */
.
swiper-notice {
font-size: 28rpx;
color:    #fa6016;
}
.swiper-container {
margin-left: 10rpx;
width: 400rpx;
height: 100%;
}
.swiper-item {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
font-size: 28rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: 2rpx;
}
/* 公告end */

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。