小程序两种滚动公告栏的实现方法

先上效果图：横向滚动栏实现：网上的几种方案或多或少都有一些问题：1.setData定时器更新

先上效果图：

横向滚动栏实现： 网上的几种方案或多或少都有一些问题： 1.setData定时器更新text view的margin-left方法，由于setData的毫秒延时，动画播放起来一卡一卡； 2.纯CSS实现，keyframe等，无法实现循环播放的设置； 3.使用string.length*font-size的方法获取字符串像素长度，不够精确，多次循环播放后误差会累积变大。 我采用的animate动画方法，实测动画流畅，循环播放无误差。

横向滚动代码如下所示

// 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" style="width:{{widthrpx}}rpx" bindload="imageLoad"></image> -->
 <text class="more">更多应用></text>
 </view>
</view>

// 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;
 color: #fa6016;
}

.left-box {
 position: relative;
 display: flex;
 align-items: center;
}

.left-text {
 position: absolute;
 left: 0;
 width: 40rpx;
 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
 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);
 }
 },
 /**
 * 开启公告字幕滚动动画
 * @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()
 query.exec((rect) => {
 that.setData({
 wrapWidth: rect[0].width,
 textWidth: rect[1].width
 }, () => {
 this.startAnimation()
 })
 })
 },
 // 定时器动画
 startAnimation() {
 //reset
 // this.data.animation.option.transition.duration = 0
 const resetAnimation = this.data.animation.translateX(this.data.wrapWidth).step({ duration: 0 })
 this.setData({
 animationData: resetAnimation.export()
 })
 // this.data.animation.option.transition.duration = this.data.duration
 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
 })
 },

sipwer滚动方式代码如下所示

swiper默认为横向滚动，vertical为true，则纵向滚动

// 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
/* 公告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 */

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。