小程序公告php实现,小程序两种滚动公告栏的实现方法
先上效果图:
横向滚动栏实现:
网上的几种方案或多或少都有一些问题:
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 */
小程序公告php实现,小程序两种滚动公告栏的实现方法相关推荐
- 小程序如何做成html的滚动字幕,小程序两种滚动公告栏的实现方法
先上效果图: 横向滚动栏实现: 网上的几种方案或多或少都有一些问题: 1.setData定时器更新text view的margin-left方法,由于setData的毫秒延时,动画播放起来一卡一卡: ...
- 小程序两种滚动公告栏的实现方法
先上效果图: 横向滚动栏实现 网上的几种方案或多或少都有一些问题: 1.setData定时器更新text view的margin-left方法,由于setData的毫秒延时,动画播放起来一卡一卡: 2 ...
- 在java程序中定义的类有两种成员_java试题 急需答案 谢谢!!!
三.填空(每小题2分,共10分)1.在Applet中,创建一个具有10行45列的多行文本区对象ta的语句为:2.创建一个标识有"关闭"字样的标签对象gb的语句为.3.方法是一种仅有 ...
- 将uni-app打包的H5放在 Android程序中在 webview 显示的两种方法
将uni-app打包的H5放在 Android程序中在 webview 显示的两种方法 前言 Hash History 完事 前言 之前有个项目要同时做小程序和APP,本着节省时间的想法,研究了下un ...
- android内存池,两种常见的内存管理方法:堆和内存池
描述 本文导读 在程序运行过程中,可能产生一些数据,例如,串口接收的数据,ADC采集的数据.若需将数据存储在内存中,以便进一步运算.处理,则应为其分配合适的内存空间,数据处理完毕后,再释放相应的内存空 ...
- 两种常见的内存管理方法:堆和内存池
在程序运行过程中,可能产生一些数据,例如,串口接收的数据,ADC采集的数据.若需将数据存储在内存中,以便进一步运算.处理,则应为其分配合适的内存空间,数据处理完毕后,再释放相应的内存空间.为了便于内存 ...
- php绘制一个三角形,如何利用css或html5画出一个三角形?两种不同的制作三角形方法(代码实例)...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
- 电脑录屏工具_一分钟教你学会两种电脑录屏的方法,以后别再说不知道了
相信大家用电脑都会截图,但有时候需要用到录屏,这就难倒了很多人.那么如何在电脑是录屏呢?下面就来教你学会两种电脑录屏的方法,以后别再说不知道了. 阅读引导: •阅读完本文预计需要2分钟时间. •本文是 ...
- [转载]:C#两种不同的存储过程调用方法
两种不同的存储过程调用方法 为了突出新方法的优点,首先介绍一下在.NET中调用存储过程的"官方"方法.另外,本文的所有示例程序均工作于SqlServer数据库上,其它情况类似,以后 ...
最新文章
- 力扣(LeetCode)刷题,简单题(第27期)
- CDH6.3.0 HUE 整合 Oozie调度
- css控制边界与边框示例(内边距、外边距使用方法)
- mycat 双主 热切换
- react实战课程_在使用React一年后,我学到的最重要的课程
- oracle下lag和lead分析函数
- Oracle数据库报错【ORA-12514 】TNS 监听程序当前无法识别连接描述符中请求服务
- 13. Roman to Integer
- Mixed Content: The page at ‘xxx‘ was loaded over HTTPS, but requested an insecure resource ‘xxx‘.
- 手机共享计算机网络连接,终于找到电脑网络共享给手机
- python 输出数据到excel设置超链接及格式设置
- [论文阅读] (23)恶意代码作者溯源(去匿名化)经典论文阅读:二进制和源代码对比
- 设计美学 第三章 设计美的文化差异
- buu [NPUCTF2020]共 模 攻 击 1
- UWB定位技术下的隧道定位监测系统真的如此受欢迎吗-新导智能
- 6 步搭建数据平台—从指标体系到相关技术
- 3000元投影仪对比评测,当贝D3X完胜极米NEW Z6 X
- win7农行证书解决办法
- 微服务之熔断、限流、降级 三板斧
- 二维等高线图转三维地形图
热门文章
- [乐意黎转载]从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
- 怎么查看图片像素和大小?照片exif信息怎么看?
- 老司机谈DevOps 2.0:引子
- 中国联通与用友签署合作框架协议 多领域展开全面合作
- semantic.css,CSS框架:Semantic UI的优缺点
- stunnel加密通道使用实践
- 洗脑 方法篇 洗脑集中营(转载)
- 第9课:scratchjr等待指令
- 博途v15模拟量转换_基于博途V15 西门子S7-1200 + 模拟量SM 1234 正反转变频调速实例...
- 《曾国藩传》第一卷京官时代-读后感