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


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 相关文章推荐
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 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作的文本留言本的例子(四)
2006/10/09 PHP
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
php实现的简单日志写入函数
2015/03/31 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
Python列表append和+的区别浅析
2015/02/02 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
幼儿教师考核制度
2014/01/25 职场文书
英文求职信写作小建议
2014/02/16 职场文书
英文推荐信格式范文
2014/05/09 职场文书
本科生就业推荐信
2014/05/19 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
家长会欢迎标语
2014/06/24 职场文书
公民代理授权委托书
2014/09/24 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫
2022微信温控新功能上线
2022/05/09 数码科技