小程序如何做成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
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!
小程序如何做成html的滚动字幕,小程序两种滚动公告栏的实现方法相关推荐
- python程序的文件拓展名主要是_Python程序文件扩展名主要有________和________两种,其中后者常用于GUI程序...
Python程序文件扩展名主要有________和________两种,其中后者常用于GUI程序 答:py:pyw: 中国大学MOOC: 下列关于我国增值税税率的表述中,不正确的是( ). 答:煤炭适 ...
- android 屏幕滚动字幕,LED灯牌显示屏滚动字幕
LED灯牌显示屏滚动字幕app是一款手机led灯牌工具,直接将手机作为led等,打造喜欢的led滚动效果:在看演唱会的时候,拿起手机就能当led显示灯,完全不用特地准备,还方便携带:并且在制作led灯 ...
- html 滚动字幕如何设置,Html 文字滚动
滚动字幕会让很多人感到兴奋,特别是第一次使用滚动字幕时,会爱不释手.现在做一个详细的方案,让你更全面地了解一下. 滚动字幕在FrontPage的组件里有,但是FrontPage这个软件只能支持单行文字 ...
- html 滚动字幕如何设置,如何制作滚动字幕 视频画面加滚动字幕,自己设置滚动字幕的显示时间(滚动次数)...
不管是电影还是电视中都经常会出现一些滚动字幕,滚动字幕的内容可以是广告.通知.说明.或者是总结等.视频中的滚动字幕除了起到宣传或提示的作用,更重要的是丰富了视频的层次,让画面更加精美.但有时候我们自己 ...
- html滚动字幕图片,网页HTML代码滚动文字制作
讲述HTML代码中比较特殊的标签,它能使网页中的文字滚动,并且可以控制其滚动的属性.以下是小编整理的网页HTML代码滚动文字制作,欢迎来阅读! 制作滚动文字 通过本章前面的学习,读者已经能够很好地控制 ...
- html语音中添加滚动字幕,如何给视频添加滚动字幕
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. 以爱剪辑为例,给视频添加滚动字幕的方法如下: 1.打开爱剪辑视频编辑软件. 2.打开后双击下面的白色方框添加要制作的视频. 3.点 ...
- matlab 多重比较,谈一谈两种常用的多重比较校正方法(附Matlab程序)
作者:kervin 微信号:kervin_zhao 在科学研究的统计分析中,我们往往会遇到多重比较校正问题.多重比较校正的方法很多,如Bonferroni.False Discovery Rate(F ...
- 【华为云技术分享】云小课 | 迁移第三方云厂商数据至OBS,两种方式任你选
如何将我在第三方云厂商对象存储上的数据迁移至华为云OBS?华为云主要提供对象存储迁移服务(Object Storage Migration Service,OMS)和云数据迁移(Cloud Data ...
- js两种滚动事件写法
方式一:可判断滚动条滚动方向. $(window).scroll(() => {// 滚动条距文档顶部的距离, || 是做兼容处理的let scrollTop = window.pageYOff ...
最新文章
- 一个点到多边形顶点距离相同_走进高维空间——所有点之间的距离都相等!奇妙、疯狂、不可思议...
- 网络营销外包——网络营销外包前关键词排名反超首页的原因在哪里
- CSS属性display:inline-block使用揭秘
- Spring Boot使用Redis进行消息的发布订阅
- scrapy框架结构
- RESTful 架构风格概述
- 鸿蒙2.0beta报名,鸿蒙OS 2.0 Beta版系统在哪报名-报名方法介绍
- Jquery操作Table
- intel 酷睿core系列cpu的类型:U M H HQ MQ
- 比较好的取色工具汇总
- 相关系数excel_利用【相关系数】理解数据之间的关系
- python爬虫学习-scrapy爬取链家房源信息并存储
- ngx 之 location
- c语言搜题答案软件软件,大学c语音搜题
- 电脑浏览器一直显示邮箱服务器失败,各种PC客户端都无法连接Outlook.com邮箱
- windows安装gensim
- split使用总结,被坑的正则特殊符号:*/+
- Packetdrill(网络协议测试工具)
- 人生感悟--条条经典
- 个人投资课 张潇雨_张潇雨《个人投资课》之五大原则