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


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中关于indexOf的使用方法与问题小结
Aug 05 Javascript
js内置对象 学习笔记
Aug 01 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
用js来获取上传的文件名纯粹是为了美化而用
Oct 23 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
Vue微信公众号网页分享的示例代码
May 28 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
投票管理程序
2006/10/09 PHP
php 什么是PEAR?(第二篇)
2009/03/19 PHP
php获取域名的google收录示例
2014/03/24 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
php eval函数一句话木马代码
2015/05/21 PHP
php生成与读取excel文件
2016/10/14 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python 爬虫模拟登陆知乎
2016/09/23 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
python怎么提高计算速度
2020/06/11 Python
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
找工作最新求职信
2013/12/22 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
居委会工作总结2015
2015/05/18 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript