微信小程序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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
url 特殊字符 传递参数解决方法
Jan 01 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 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开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
js function定义函数使用心得
2010/04/15 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
Pandas中把dataframe转成array的方法
2018/04/13 Python
python对excel文档去重及求和的实例
2018/04/18 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
python datetime处理时间小结
2020/04/16 Python
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
出国留学介绍信
2014/01/13 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
男女朋友协议书
2014/04/23 职场文书
努力学习演讲稿
2014/05/10 职场文书
手机被没收的检讨书
2014/10/04 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
焦裕禄观后感
2015/06/03 职场文书