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


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代码
Apr 22 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
微信小程序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函数
2011/05/31 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
JavaScript解析URL参数示例代码
2013/08/12 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
对python sklearn one-hot编码详解
2018/07/10 Python
python计算二维矩形IOU实例
2020/01/18 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
护士在校生自荐信
2014/02/01 职场文书
服务标语大全
2014/06/18 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
教学质量月活动总结
2015/05/11 职场文书
小学六一主持词开场白
2015/05/28 职场文书
python源码剖析之PyObject详解
2021/05/18 Python
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技