跳转到主内容
趣航编程网 - 趣学编程，启航技术之路！
📁 网站地图

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

顺亿
顺亿
• 👁 0人浏览过

先上效果图：

横向滚动栏实现：

网上的几种方案或多或少都有一些问题：

1.setData定时器更新text view的margin-left方法，由于setData的毫秒延时，动画播放起来一卡一卡；

2.纯CSS实现，keyframe等，无法实现循环播放的设置；

3.使用string.length*font-size的方法获取字符串像素长度，不够精确，多次循环播放后误差会累积变大。

我采用的animate动画方法，实测动画流畅，循环播放无误差。

横向滚动代码如下所示// wxml{{text}}更多应用>

// 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公告：{{item.title}}// 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 */以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:微信小程序左右滚动公告栏效果代码实例

相关文章