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


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实现轮显新闻标题链接
Aug 13 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
前端性能优化及技巧
May 06 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
拖动时防止选中
Feb 03 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 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
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
HTML颜色选择器实现代码
2010/11/23 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
Python的迭代器和生成器
2015/07/29 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
Python编写登陆接口的方法
2017/07/10 Python
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
母亲追悼会答谢词
2014/01/27 职场文书
房屋转让协议书
2014/04/11 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
2015元旦标语横幅
2014/12/09 职场文书
运动会闭幕词
2015/01/28 职场文书
Windows server 2012搭建FTP服务器
2022/04/29 Servers