微信小程序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 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
Angular的事件和表单详解
Dec 26 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 Javascript
js 实现碰撞检测的示例
Oct 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读MYSQL中文乱码的解决方法
2006/12/17 PHP
跟我学Laravel之路由
2014/10/15 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
php如何获取文件的扩展名
2015/10/28 PHP
yii分页组件用法实例分析
2015/12/28 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
简明 Python 基础学习教程
2007/02/08 Python
跟老齐学Python之用Python计算
2014/09/12 Python
python中Flask框架简单入门实例
2015/03/21 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
.net面试题
2015/12/22 面试题
计算机工程学院个人求职信
2013/10/05 职场文书
2014年团工作总结
2014/11/27 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers