微信小程序scroll-view实现字幕滚动


Posted in Javascript onJuly 14, 2018

本文实例为大家分享了微信小程序scroll-view实现字幕滚动的具体代码,供大家参考,具体内容如下

需求:

实现框内的文字自下而上的自动循环滚动。

解决方案:

demo:字幕滚动

通过控制滑动条来完成字幕滚动,通过setinterval完成字幕循环滚动。

wxml:

<scroll-view class="container" scroll-y="true" bindscroll="scroll" scroll-top="{{scrollTop}}">
 <view class='list'>
 <view class='blank'></view>
 <view>
 <text class="txt-light">09:08</text> 很多人的一生,基本都是自己跟别人较劲,比如别人对自己的期待,比如把别人看得太重把自己看得太轻。其实一个人最应该考虑的问题是,自己如何与自己相处,比如人去楼空的时候如何照顾好自己的孤独,比如夜深人静的时候如何跟心灵沟通。自己跟自己能和谐共处,自己跟别人就能相安无事。
 </view>
 <view>
 <text class="txt-light">19:08</text> 平和是待人处事的一种态度,也是做人酌一种美德。平和既是一种修养,又是一种工作方法。平和的人,从不被忙碌所萦绕,闲时吃紧,忙里悠闲。待人不严,教人勿高。宽严得宜,分寸得体。身心自在,能享受生活之乐趣。平和的人生,是和谐的人生,健康的人生。
 </view>
 <view class='blank'></view>
 </view>
</scroll-view>

wxss:

.container {
 background-color: #FAEBD7;
 height: 150rpx;
}
 
.txt-light {
 color: #acadbe;
}
 
.blank {
 height: 150rpx;
}

js

Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 scrollTop:0
 },
 
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 
 },
 
 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {
 
 },
 
 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {
 // 获取scroll-view的节点信息
 //创建节点选择器
 var query = wx.createSelectorQuery();
 query.select('.container').boundingClientRect()
 query.select('.list').boundingClientRect()
 query.exec((res) => {
 var containerHeight = res[0].height;
 var listHeight = res[1].height;
 
 // 滚动条的高度增加
 var interval = setInterval(() => {
 if (this.data.scrollTop < listHeight - containerHeight) {
  this.setData({
  scrollTop: this.data.scrollTop + 10
  })
 } else {
  // clearInterval(interval);
  this.setData({
  scrollTop: 0
  })
 }
 }, 1000)
 })
 
 },
 scroll: function () {
 // 获取scroll-view的节点信息
 //创建节点选择器
 var query = wx.createSelectorQuery();
 query.select('.list').boundingClientRect()
 query.exec((res) => {
 this.setData({
 scrollTop: -(res[0].top)
 })
 // console.log(res);
 })
 }
})

tips:此次字幕滚动,即可自动滚动,也可拖动。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript学习笔记5 类和对象
Jan 11 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 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
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 #jQuery
You might like
PHP对象链式操作实现原理分析
2016/10/09 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
javascript实现动态标签云
2015/10/16 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
Python读写锁实现实现代码解析
2020/11/28 Python
python实现双人五子棋(终端版)
2020/12/30 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
客服工作职责
2013/12/11 职场文书
家长学校培训材料
2014/08/20 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
普通党员对照检查材料
2014/09/24 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android