首页 > 编程语言 >直播源码开发,实现 scroll-view 自动滚动到底部,并控制触发频率

直播源码开发,实现 scroll-view 自动滚动到底部,并控制触发频率

时间:2023-10-27 14:25:37浏览次数:52  
标签:滚动 源码 query scrollTop scroll view

直播源码开发,实现 scroll-view 自动滚动到底部,并控制触发频率

HTML

 

scroll-view 固定高度,允许纵向滚动,scrollTop 值通过变量动态改变。将 scroll-view 内容区域通过 view 标签进行包裹。

 


<scroll-view class="dialogue-box" :scroll-y="true" :scroll-top="scrollTop">
  <view class="dialogue-box-content">
    // 内容区域
  </view>
</scroll-view>

js

 

通过类名获取 scroll-view、和 scroll-view内容容器,得到两个元素的高度,动态设置 scrollTop 值。

 

在频繁触发场景下,为了降低执行频率,可以增加节流函数 throttle,

 


import { throttle } from '@/utils/utils.js'
export default {
  methods: {
    // 自动滚动到底部
    chatScrollTop: throttle(function() {
      this.$nextTick(() => {
        const query = uni.createSelectorQuery()
        query.select('.dialogue-box').boundingClientRect()
        query.select('.dialogue-box-content').boundingClientRect()
        query.exec(res => {
          const scrollViewHeight = res[0].height
          const scrollContentHeight = res[1].height
          if (scrollContentHeight > scrollViewHeight) {
            const scrollTop = scrollContentHeight - scrollViewHeight
            this.scrollTop = scrollTop
          }
        })
      })
    }, 1000),
  }
}

 

当 scroll-view 内容改变时,调用 chatScrollTop 方法,就可以实现 scroll-view 内容区域自动滚动到底部效果。

 以上就是 直播源码开发,实现 scroll-view 自动滚动到底部,并控制触发频率,更多内容欢迎关注之后的文章

 

标签:滚动,源码,query,scrollTop,scroll,view
From: https://www.cnblogs.com/yunbaomengnan/p/17792193.html

相关文章

  • 易语言开发银行流水生成器,分享源码仅供学习
    小编我是做技术开发的,易语言的话学了将近有10年左右,然后看网上很多人都在找这个玩意,然后就是有一个人卖9000多,感觉那种人就是向前想疯了,我分析了一下它的软件源码,也就是辅助生成数据,并不是一键它会生成文档,就是给你按参数生成固定的数据,然后需要你自己复制粘贴,这个原理的实现真的......
  • 直播软件源码,java数据分页几种方式
    直播软件源码,java数据分页几种方式1.使用PageUtils Service: /**   *分页查询   *   *@paramparams查询条件   *@returnPageUtils   */  PageUtilsqueryPage(Map<String,Object>params);   ServiceImpl: Page<数据库对象实体>pa......
  • 2-3 LED闪烁实现源码分析
    LED灯闪烁实现源码分析由于需要查看引脚引脚图如下:功能:D4灯循环闪烁,即P1_1引脚循环输出高低电平引入头文件,宏定义引脚#include"ioCC2530.h"#defineD4P1_1初始化LED的I/O引脚P1SEL&=~0x02;P1DIR|=0x02;在死循环中控制灯光闪烁while(1){ D4=~D4;......
  • winforms的datagridview内设置右键菜单,并删除指定一行,之后序列号改变
    一、编辑右键菜单  1、在工具箱中拖入一个contextMenuStrip控件;  2、编辑contextMenuStrip控件,在控件内添加想要的选项,在此添加“删除”选项;  3、(可选项)绑定DataGridView和新增的contextMenuStrip1,选中DataGridView,属性,contextMenuStrip中选择下拉:contextMenuStrip1......
  • Android入门教程 | RecyclerView使用入门
    想必大家对列表的表现形式已经不再陌生。手机上有联系人列表,文件列表,短信列表等等。本文讲述的是在Android开发中用RecyclerView来实现列表效果。使用步骤引入RecyclerView在app的build.gradle文件中添加引用。我们使用的是androidx包。gradle:dependencies{//........
  • 每日一练:无感刷新页面(附可运行的前后端源码,前端vue,后端node)
    1、前言想象下,你正常在网页上浏览页面。突然弹出一个窗口,告诉你登录失效,跳回了登录页面,让你重新登录。你是不是很恼火。这时候无感刷新的作用就体现出来了。2、方案2.1redis设置过期时间在最新的技术当中,token一般都是在Redis服务器存着,设置过期时间。只要在有效时间内,重新发出请......
  • 每日一题:吃透大文件上传问题(附可运行的前后端源码)
    大文件上传前言在日常开发中,文件上传是常见的操作之一。文件上传技术使得用户可以方便地将本地文件上传到Web服务器上,这在许多场景下都是必需的,比如网盘上传、头像上传等。但是当我们需要上传比较大的文件的时候,容易碰到以下问题:上传时间比较久中间一旦出错就需要重新上传一般服务......
  • 常见编译优化及LLVM Pass源码分析(填坑ing)
    一、常量传播二、常量折叠三、复写传播四、公共子表达式消除五、死代码消除(ADCE,Aggressivedeadcodeelimination)llvm/lib/Transforms/Scalar/ADCE.cpp六、函数内联......
  • Redis 7.0 源码环境搭建与阅读技巧
    天下武功,无坚不摧,唯快不破!我的名字叫Redis,全称是RemoteDictionaryServer。有人说,组CP,除了要了解她外,还要给机会让她了解你。那么,作为开发工程师的你,是否愿意认真阅读此心法抓住机会来了解我,运用到你的系统中提升性能。我遵守BSD协议,由意大利人SalvatoreSanfilippo......
  • 利用paraview中的EvenlySpacedStreamlines2D绘制流线图
    paraview中有一个filter叫EvenlySpacedStreamlines2D,可以对xy平面或者平行于xy平面的clip绘制均匀分布的流线,但是仅限于xy平面或者平行于xy平面的clip。下面是效果对比,右边的图是经过EvenlySpacedStreamlines2D处理自动生成的,可以发现流线分布非常均匀。   在一些三维案例......