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


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使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 Javascript
微信小程序实现签到弹窗动画
Sep 21 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如何透过ODBC来存取数据库
2006/10/09 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
js href的用法
2010/05/13 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
js继承实现方法详解
2016/12/16 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
简单理解Python中基于生成器的状态机
2015/04/13 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
pandas如何处理缺失值
2019/07/31 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
课内比教学心得体会
2014/09/09 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
法律意见书范文
2015/06/04 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android