小程序如何做成html的滚动字幕,小程序两种滚动公告栏的实现方法

先上效果图：

横向滚动栏实现：

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

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,0),0);">1));

z-index: 99;

}

.right-text {

position: absolute;

right: -1rpx;

width: 1),0);">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: 0,textWidth: 0

},onShow() {

@H_502_25@this.initAnimation(@H_502_25@this.data.text)

},onHide() {

@H_502_25@this.destroyTimer()

@H_502_25@this.setData({

timer: null

})

},onUnload() {

502_25@if (@H_502_25@this.data.timer) {

clearTimeout(@H_502_25@this.data.timer);

}

},/**

* 开启公告字幕滚动动画

* @param {String} text 公告内容

* @return {[type]}

*/

initAnimation(text) {

@H_502_25@let that = @H_502_25@this

@H_502_25@this.data.duration = 15000

@H_502_25@this.data.animation = wx.createAnimation({

duration: @H_502_25@this.data.duration,timingFunction: 'linear'

})

@H_502_25@let query = wx.createSelectorQuery()

query.@H_502_25@select('.content-Box').boundingClientRect()

query.'#text').boundingClientRect()

query.exec((rect) => {

that.setData({

wrapWidth: rect[0].width,textWidth: rect[1].width

},() => {

@H_502_25@this.startAnimation()

})

})

},136);">// 定时器动画

startAnimation() {

//reset

// this.data.animation.option.transition.duration = 0

@H_502_25@const resetAnimation = @H_502_25@this.data.animation.translateX(@H_502_25@this.data.wrapWidth).step({ duration: 0 })

@H_502_25@this.setData({

animationData: resetAnimation.export()

})

// this.data.animation.option.transition.duration = this.data.duration

@H_502_25@const animationData = @H_502_25@this.data.animation.translateX(-@H_502_25@this.data.textWidth).step({ duration: @H_502_25@this.data.duration })

setTimeout(() => {

@H_502_25@this.setData({

animationData: animationData.export()

})

},0);">100)

@H_502_25@const timer = setTimeout(() => {

@H_502_25@this.startAnimation()

},@H_502_25@this.data.duration)

@H_502_25@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 */

总结

以上是编程之家为你收集整理的小程序两种滚动公告栏的实现方法全部内容，希望文章能够帮你解决小程序两种滚动公告栏的实现方法所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！