- 2024-11-09微信小程序获取某个元素或组件距离顶部的初始高度
给元素加一个id然后使用wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){rect.id//节点的IDrect.dataset//节点的datasetrect.left//节点的左边界坐标rect.right//节点的右边界坐标rect.top//节点的上边界坐标rect.bottom//节点的下
- 2024-10-12vue表格轮播插件
1.前言需求：制作大屏看板时，经常要展示表格数据，通常一页时放不下的，表格需要自动滚动，并维持表头固定为何自己封装：网上的滚动组件由2类，一种传入json数据进行滚动，优点是可以做到表头固定，但是样式不方便自定义（DataV）,一直是常规滚动插件，不支持表头固定2.实现思路及说明使用插槽接
- 2024-10-082018_10_29_02
代码收集区分桌面环境与移动平台参考文章:https://segmentfault.com/a/1190000016760627<<<docs/.vuepress/components/js/2018_10_29_01/2018_10_29_01.jselement元素Y轴的scroll事件触发移动平台<<<docs/.vuepress/components/js/2018_10_29_02/html_scroll_mo
- 2024-09-30vue3滚动条无法监测滚动高度问题
第一个是根组件第二个是子组件第三个是滚动复用组件<el-scrollbarref="scroll"style="height:100%"@scroll="handleScroll">在滚动复用组件中想要监测滚动的高度变化，一开始没有使用el-scrollbar组件而是直接使用原生的格式导致如图所示滚动条与文
- 2024-09-24实战教程：PC端触底加载的实现方法
前言随着单页应用的发展，很多网站采用了触底加载的技术，用户滚动到页面底部时，会自动加载更多内容，为用户提供了更好的使用体验。本文将介绍如何在PC端实现触底加载功能。实现思路实现触底加载的关键在于判断用户是否已经滚动到页面底部。一种常用的实现方式是使用window.innerHeight、
- 2024-09-19vue项目记录每个页面保持滚动条的位置
路由元信息增加keepAlive:true，scrollTop:{top:0}，{path:'/**/**',name:'**',component:()=>import('@/views/**/index.vue'),meta:{title:'**',affix:fals
- 2024-09-12vue3 h5自定义tabbar并用keep-alive保存缓存路由
路由嵌套封装tabbar组件创建一个容器放tabbar和子路由keep-alive保存路由状态1.路由嵌套{ path:'/', name:'index', component:()=>import('@/views/index.vue'), children:[ { path:'', redirect:'/com', m
- 2024-09-07关于HarmonyOS的学习
day21一、window对象常用方法 //提示信息，带有确认和取消。如果确认返回的是true，取消返回的是false //varres=confirm('你确定登录吗？') //console.log(res) varbtn1=document.querySelectorAll('button')[0] varbtn2=document.qu
- 2024-09-05jQuery CSS 浏览器滚动到顶部固定左侧栏
<script>$(document).ready(function(){vardiv=$('#leftNav_2024925');//替换为你的div的IDvardivTop=div.offset().top;//获取div顶部的位置$(window).scroll(function(){varscrollTop=$(this).scrollTop();
- 2024-09-03uniapp手机端页面滚动到最底部
最近用uniapp开发一个类似于微信聊天功能的手机端软件，在进入聊天页面时要求页面滚动到最底部，刚开始使用了下面的代码：uni.createSelectorQuery().select("自己的容器.box").boundingClientRect((res)=>{console.log(res)constscrollH=res.top;uni.pageSc
- 2024-08-28js实现刷新页面后回到记录时滚动条的位置
第二种方案1.通过div的onscroll事件记录滚动条的scrollTop值，设置到document.cookie2.页面加载时再读取document.cookie的值，设置给div的scrollTop<scripttype="text/javascript">functionKeepScrollBar(){varscrollPos;if(typeofwindow.pageYOffset!='undefi
- 2024-08-27虚拟列表
<template><divref="list"class="infinite-list-container"@scroll="scrollEvent($event)"><divclass="infinite-list-phantom":style="{height:listHeight+'px'}"></di
- 2024-08-20原生JS实现虚拟列表
什么是虚拟列表如果我们要将一个数组渲染为列表添加到页面中，我们可以很容易实现，无非就是循环遍历这个数组，然后依次创建DOM元素插入即可，但是如果数据量很庞大，比如有一万条数据，我们就要把一万个DOM结点插入到页面中，这显然会导致页面的卡顿。为了针对这个场景进行优化，让页面和我
- 2024-08-07Vue3中滚动加载更多数据
<divclass="my-task-body-inner"ref="scrollContainer"@scroll="handleScroll"style="height:100%;overflow-y:auto;"></div>constscrollContainer=ref(null); consthandleScroll=()=>
- 2024-07-22h5开发心得
运营推广移动端开发1.适配原理宽的适配：flexible.js适配，是根据屏幕的宽度计算根标签的大小进行适配，高的适配：需要用vh,vh在静态页面好用，vh是根据屏幕的可视高度计算的，当页面中有输入框时vh的页面会受到挤压，如下图用百分比2.移动端布局如果有按钮，最好让ui设计到一个层级上
- 2024-07-04让vue重新渲染
目录问题重现解决方法项目地址问题重现<scroll-viewclass="right-scroll-view"scroll-y:style="{height:wh+'px'}":scroll-top="scrollTop">这段代码中，我想实现切换页面但是滚动条每次都会切换到顶部，在js代码中设置scrollTop值为0，但是发现不起作用问GPT发现是，如果scro
- 2024-06-20需求：添加item后自动滚动到容器底部(如果有滚动条)
大巧不工,用了原生js<template><divclass="app-container"><divclass="box"><divv-for="(item,index)incount":key="index"class="item">{{item}}</div>
- 2024-04-12uniapp实现虚拟列表（元素固定高度）
一、应用场景当接口返回数据太多时，前端可使用虚拟列表，实现长列表。二、原理只有在屏幕部分元素被显示出来，并且被更新，始终只有固定数量的节点，不会卡顿。三、效果图四、思路步骤使用Object.freeze冻结对象，极大优化性能生成多个元素的options,或者动态获取根据onPag
- 2024-03-27html消息滚动
案例1<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>
- 2024-03-21clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
一、定义document.body.clientHeight网页可见区域高度document.body.scrollHeight网页正文全文高document.body.offsetHeight网页可见区域高（包括边线的高）document.body.scrollTop网页被卷去的高window.screen.height屏幕分辨率高
- 2024-03-21js实现页面滚动至指定位置
实现思路：1、通过判断链接是否有某参数，来决定是否展示第二屏页面2、用offset来获取第二屏与文档顶部距离3、用scrollTop将滚动条滚动至第二屏位置if(location.href.indexOf('part')!=-1){$('html,body').animate({scrollTop:$('.bg2').offset().top},800);}一、offs
- 2024-01-26vue 一个页面切到另一个页面，再切回来的时候，滚动条的位置不变（只处理当前页面）
1、使用 beforeRouteLeave 来记录路由跳转之前滚动条的位置beforeRouteLeave(to,from,next)：离开路由之前执行的函数,可用于页面的反向传值，页面跳转；beforeRouteLeave(to,from,next){console.log('beforeRouteLeave.................')this.scroll=document.
- 2024-01-15vue 滚动条滚动到列表的某个区域时，将(负责的、参与的、管理的)区域的title固定到头部
1、html1<div:id="item.id"class="list-item"v-for="(item,index)inokrTableDate":key="index">2<pclass="bold":class="{'is-fixed':isFixedFlag1&&item.id===�
- 2023-12-04页面滚动点击返回至顶部，js怎么实现
当页面要滚回顶部时，使用scrollTop属性，设置值为0即可当页面具有DOCTYPE，或者说指定了DOCTYPE时，使用document.documentElement.scrollTop。当页面不具有DOCTYPE，或者说没有指定了DOCTYPE时，使用document.body.scrollTop。为了兼容各种情况，建议同时使用这两种写法。documen
- 2023-11-27JS 判断是否有滚动条和滚动条滚到底部
判断是否有滚动条constscrollDom=document.getElementById('滚动元素id')if(!scrollDom)returnif(scrollDom.clientHeight===scrollDom.scrollHeight){//没有滚动条}判断滚动条滚到底部constscrollDom=document.getElementById('滚动元素id')if(!scr