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


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,jquery闭包概念分析
Jun 19 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
jQuery操作之效果详解
May 19 jQuery
在react中使用vue的状态管理的方法示例
May 02 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 inc文件使用的风险和注意事项
2013/11/12 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
jQuery动态添加
2016/04/07 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
生物化工工艺专业应届生求职信
2013/10/08 职场文书
单位消防安全制度
2014/01/12 职场文书
《去年的树》教学反思
2014/04/11 职场文书
妈妈活动方案
2014/08/15 职场文书
文明礼仪倡议书
2015/04/28 职场文书
小学运动会加油词
2015/07/18 职场文书
校长新学期致辞
2015/07/30 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python