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

2024-09-28 08:39:20

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

需求：

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

解决方案：

通过控制滑动条来完成字幕滚动，通过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;
}

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:此次字幕滚动，即可自动滚动，也可拖动。

上一版实现方式

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序（九）scroll-view组件详细介绍

scroll-view为滚动视图,分为水平滚动和垂直滚动.注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效.滚动视图常用的地方一般都是Item项比较多的界面,比如我的模块主要属性: 使用演示: wxml  <scroll-view scroll-y="true" style="height: 200px"> <view style="background: r
微信小程序scroll-view实现滚动穿透和阻止滚动的方法

scroll-view滚动穿透,阻止滚动页面弹窗阻止滚动是一种常见的问题,这里简单介绍小程序scroll-view的一种解决方式常用阻止滚动方式在不使用scroll-view的弹窗中, 为position为absolute或fixed的元素设置catchtouchmove空事件就可以阻止弹窗下的页面因事件穿透滚动 <view catchtouchmove="doNothing"></view> 也可直接写catchtouchmove,相当于绑定了事件名为t
微信小程序点击切换样式scroll-view实现代码实例

这篇文章主要介绍了微信小程序点击切换样式scroll-view实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 scroll-view滚动视图点击切换样式 *.wxml <view class="content"> <view class="navbg"> <view class="nav"> <scroll-view class="
微信小程序scroll-view仿拼多多横向滑动滚动条

本文实例为大家分享了微信小程序横向滑动滚动条的具体代码,供大家参考,具体内容如下效果图实现代码 index.wxml <scroll-view scroll-x="true" class="scroll-view-x" style="padding-top:10rpx" scroll-with-animation="true" wx:if="{{tlist[currentTab].secondList}}&
微信小程序 scroll-view实现上拉加载与下拉刷新的实例

微信小程序 scroll-view实现上拉加载与下拉刷新的实例实现效果图: 如图,使用小程序的scroll-view实现的上拉加载数据,下拉刷新数据,试下代码如下: js文件代码: var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action"; var page = 1; var GetList = function (that) { that.setData({ hidden: false }); wx.r
微信小程序 scroll-view实现锚点滑动的示例

前言最近开始做小程序,通读一遍文档再上手并不算难,但不得不说小程序里还是有一些坑.这里说一下如何实现页面锚点跳转,一个城市列表的效果示意图如下: 因为在微信小程序的环境中不能想在浏览器里设置标签,或者操作dom滚动,传统做法就行不通了,一切都得按小程序的文档来. 一开始我们的做法是使用boundingClientRect()方法获取每个锚点的坐标,然后再用wx.pageScrollTo()方法滑动过去.结果发现效果不是很好,因为boundingClientRect方法返回的每个点的坐标会随着屏
微信小程序 scroll-view隐藏滚动条详解

一:scroll-view隐藏滚动条在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法: scroll-view.wxml: scroll-view.wxss scroll-view.js 最终显示效果如下; 注意: (1)不能在scroll-view中使用textarea,mao,canvas,video组件 (2)scroll-init-view的优先级高于scroll-top (3)onPullDownRefresh事
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码

具体代码如下所示: // 1.scroll-y="true" Y轴滚动 // 2.应该是设置了高才能行 // 3.使用scroll-top属性实现滚动到底部,scroll-top不要带单位 <scroll-view scroll-y="true" style="height:{{height-50}}px;" scroll-top="{{scrollTop}}"> <block wx:for="{{
解决微信小程序scroll-view组件无横向滚动的问题

微信开放文档中scroll-view组件的部分代码如下 <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%"> <view id="demo1" class="scroll-view-item_H demo-text-1"></vi
微信小程序功能之全屏滚动效果的实现代码

想做一个全屏滚动的效果,于是在网上找了一个差不多的例子,但是觉得有些地方不是很好,于是改进了一下: 先给大家展示下效果图,感觉不错,请参考实例代码. 代码: wxml: <!-- 第一页 -- > <view id='hook1' class="section section01 {{scrollindex==0?'active':''}}" style='background:red' bindtouchstart="scrollTouchStart&qu
微信小程序scroll-view锚点链接滚动跳转功能

html <view class="list"> <view bindtap='jumpTo' wx:for="{{keys}}" data-item="{{item}}">{{item}}</view> </view> <scroll-view scroll-into-view="{{toitem}}" scroll-y="true" scroll-w
微信小程序实现多行文字滚动

本文实例为大家分享了微信小程序实现多行文字滚动的具体代码,供大家参考,具体内容如下 wxml <view class="full" style="height:100%;overflow:hidden"> <swiper autoplay="true" interval="3000" duration="500" circular="true" vertical=&qu
微信小程序实现多行文字滚动效果

本文实例为大家分享了微信小程序实现多行文字滚动的具体代码,供大家参考,具体内容如下 wxml <view class="full" style="height:100%;overflow:hidden"> <swiper autoplay="true" interval="3000" duration="500" circular="true" vertical=&qu
微信小程序movable view移动图片和双指缩放实例代码

movable-area是微信小程序的新组件,可以用来移动视图区域movable-view.移动方向可选择任何.垂直和平行.可移动区域里包含其他文本.图片.按钮等组件.可移动区域可绑定touchend等事件.movable-view的参数可调整动画效果. 先从movable-view开始说起吧. movable-view是小程序自定义的组件.其描述为:"可移动的视图容器,在页面中可以拖拽滑动". 官方文档地址: https://mp.weixin.qq.com/debug/wxadoc
微信小程序实现瀑布流分页滚动加载

本文实例为大家分享了微信小程序实现瀑布流分页滚动加载的具体代码,供大家参考,具体内容如下两种分页方式普通的分页效果会在页面底部提供点击下一页和上一页的按钮,在点击了按钮之后才会触发调取数据的接口,这种方式的用户体验一般另一种分页效果不需要用户点击按钮,只要浏览到当前页面的后几条数据时,系统会自动发送请求获取后一页的数据,并展示到页面上,这样就可以实现类似无限滚动的效果以csdn为例,当滚动条到达这个地方时,会自动调用请求下一页数据的接口,然后累加到加载完成的数据列表中实现思路滚动分页
微信小程序之判断页面滚动方向的示例代码

微信小程序中如果判断页面滚动方向? 解决方案 1.用到微信小程序API 获取页面实际高度 nodesRef.boundingClientRect([callback]) 监听用户滑动页面事件onPageScroll. 2.获取页面实际高度  <view id="box"> <view class="list" wx:for="{{List}}" wx:key="List{{index}
微信小程序scroll-view实现横向滚动和上拉加载示例

今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方. 先看最终效果. 横向滚动 1.设置滚动项display:inline-block; 2.设置滚动视图容器white-space: nowrap; 3.滚动项不要用float 为什么会有以上三点要求呢? 其实横向滚动官方文档中是没有做太多说明的,只说明需要定义scroll-view滚动方向scroll-x=true允许横向滚动,但是我在实践的时候我发现,你要横向滚动,首先你得是一排吧.所以才发现需要定义滚动项
微信小程序实现横向滚动条

本文实例为大家分享了微信小程序横向滚动条的具体代码,供大家参考,具体内容如下微信小程序scroll-view实现横向滑动滚动效果图如下: 左右滑动效果展示如下: 实现代码: index.wxml <view class="hotService"> <view class="hotServiceList_box">  <scroll-view c

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

相关推荐

随机推荐