微信小程序实现自上而下字幕滚动


Posted in Javascript onJuly 14, 2018

本文实例为大家分享了微信小程序实现字幕滚动的具体代码,供大家参考,具体内容如下

微信小程序实现自上而下字幕滚动

需求:

实现框内的文字自下而上的自动循环滚动。

解决方案:

第一种方法:

经查询,最一开始实现字幕滚动是使用的微信小程序的swiper组件,后来发现,使用swiper组件实现的效果类似于轮播图,不符合需求。

<swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="2000">
 <view class='list'>
 <view wx:for="{{List}}" wx:key="index">
 <swiper-item>
 <text class='txt-light'>{{item.checkTime}}</text> {{item.content}}
 </swiper-item>
 </view>
 </view>
</swiper>

第二种方法:

使用微信小程序的动画来来实现字幕滚动。

思路:

1.当list底部到container框的顶部时,即,内容全部走出了框外。结束字幕滚动,重新开始下一轮的滚动。
2.计算container框的高度,list的高度。一个框中的内容显示时长为 1500(暂定),通过list的高度除以container框的高度来判断显示时长(求整数并加1(+1是为了显示最后一个空白框))。

实现:

wxml

<view class="container">
 <view class='list' animation="{{animationData}}">
 <view>
 <text class="txt-light">09:08</text> 很多人的一生,基本都是自己跟别人较劲,比如别人对自己的期待,比如把别人看得太重把自己看得太轻。其实一个人最应该考虑的问题是,自己如何与自己相处,比如人去楼空的时候如何照顾好自己的孤独,比如夜深人静的时候如何跟心灵沟通。自己跟自己能和谐共处,自己跟别人就能相安无事。
 </view>
 <view>
 <text class="txt-light">19:08</text> 平和是待人处事的一种态度,也是做人酌一种美德。平和既是一种修养,又是一种工作方法。平和的人,从不被忙碌所萦绕,闲时吃紧,忙里悠闲。待人不严,教人勿高。宽严得宜,分寸得体。身心自在,能享受生活之乐趣。平和的人生,是和谐的人生,健康的人生。
 </view>
 </view>
</view>

wxss

.container {
 background-color: #ccc;
 height:150rpx;
 margin: 20rpx 20rpx 20rpx 20rpx; 
 overflow:auto;
}
.txt-light {
 color:#acadbe;
}

js

Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 
 },
 
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 
 },
 
 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {
 
 },
 
 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {
 // this.util();
 this.getHeight();
 },
 util: function (obj) {
 console.log(obj);
 console.log(-obj.list);
 var continueTime = (parseInt(obj.list / obj.container) + 1) * 1500;
 var setIntervalTime = 50 + continueTime;
 
 var animation = wx.createAnimation({
 duration: 200, //动画时长
 timingFunction: "linear", //线性
 delay: 0 //0则不延迟
 });
 this.animation = animation;
 animation.translateY(obj.container).step({ duration: 50, timingFunction: 'step-start' }).translateY(-obj.list).step({ duration: continueTime });
 this.setData({
 animationData: animation.export()
 })
 setInterval(() => {
 animation.translateY(obj.container).step({ duration: 50, timingFunction: 'step-start' }).translateY(-obj.list).step({ duration: continueTime });
 this.setData({
 animationData: animation.export()
 })
 }, setIntervalTime)
 // setInterval(() => {
 // animation.translateY(50).step({ duration: 50, timingFunction: 'step-start' }).translateY(-250).step({ duration: 5000 });
 // this.setData({
 // animationData: animation.export()
 // })
 // }, 6000)
 },
 getHeight() {
 var obj = new Object();
 //创建节点选择器
 var query = wx.createSelectorQuery();
 query.select('.container').boundingClientRect()
 query.select('.list').boundingClientRect()
 query.exec((res) => {
 obj.container = res[0].height; // 框的height
 obj.list = res[1].height; // list的height
 // return obj;
 this.util(obj);
 })
 }
})

20180712更新:

1.框设置为禁止滑动,即

.container {
 overflow: hidden;
}

防止手动滑动动画,从而影响setinterval的执行。

2.设置setinterval的执行时间>动画执行时间,防止setinterval执行卡顿。

另外一种实现方式:scroll-view实现字幕滚动

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
javascript基于定时器实现进度条功能实例
Oct 13 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
通过实例学习React中事件节流防抖
Jun 17 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
Java 生成随机字符的示例代码
Jan 13 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 #Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 #Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 #Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 #Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 #Javascript
vue实现组件之间传值功能示例
Jul 13 #Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 #Javascript
You might like
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
javascript比较文档位置
2008/04/08 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
详解javascript void(0)
2020/07/13 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
python调用java的Webservice示例
2014/03/10 Python
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Python标准库sched模块使用指南
2017/07/06 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
PyTorch预训练的实现
2019/09/18 Python
Python进行统计建模
2020/08/10 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
婚礼证婚人证婚词
2014/01/13 职场文书
学员自我鉴定
2014/03/19 职场文书
人力资源管理求职信
2014/08/07 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
安全生产会议制度
2015/08/06 职场文书
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android