横向滚动栏实现：
网上的几种方案或多或少都有一些问题：
1.setData定时器更新text view的margin-left方法，由于setData的毫秒延时，动画播放起来一卡一卡；
2.纯CSS实现，keyframe等，无法实现循环播放的设置；
3.使用string.length*font-size的方法获取字符串像素长度，不够精确，多次循环播放后误差会累积变大。
我采用的animate动画方法，实测动画流畅，循环播放无误差。
横向滚动代码如下所示
// wxml <view> <view> <text></text> <view> <view></view> <view> <view animation="{{animationData}}"><text>{{text}}</text></view> </view> <view></view> </view> </view> <view bindtap="goApp"> <!-- <image mode="aspectFit" src="https://www.jb51.net/assets/images/app.png" bindload="imageLoad"></image> --> <text>更多应用></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>公告：</text> <swiper 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>{{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 */