您的当前位置:首页vue-scroller记录滚动位置的示例代码

vue-scroller记录滚动位置的示例代码

2023-12-08 来源:菲特宠物网

问题描述:

列表页进入详情页,或者tab页切换,然后再返回列表页,希望能切换到之前滚动位置

解决问题思路:

切换到其他页面前记录位置,返回列表页的时候返回位置。这就需要借助vue-router的beforeRouteEnter和beforeRouteLeave这两个钩子去实现.

还有一种更简单粗暴的方法, vue-scroller.min.js源码中添加宽高不为零判断,实现方式见评论,是最近代码优化的时候发现的。

代码部分:

beforeRouteEnter(to,from,next){ if(!sessionStorage.askPositon || from.path == '/'){//当前页面刷新不需要切换位置 sessionStorage.askPositon = ''; next(); }else{ next(vm => { if(vm && vm.$refs.scrollerBottom){//通过vm实例访问this setTimeout(function () { vm.$refs.scrollerBottom.scrollTo(0, sessionStorage.askPositon, false); },0)//同步转异步操作 } }) }},beforeRouteLeave(to,from,next){//记录离开时的位置 sessionStorage.askPositon = this.$refs.scrollerBottom && this.$refs.scrollerBottom.getPosition() && this.$refs.scrollerBottom.getPosition().top; next()}, 

需要注意的点:

1.熟悉vue-router和vue-scroller的api

2.beforeRouteEnter的时候,是无法通过this去访问vue实例的,需要借助于vm

3.setTimeout 0 的使用

等下周发版的时候,我贴上链接,可以体验下效果

小编还为您整理了以下内容,可能对您也有帮助:

vue中获取滚动高度或指定滚动到某位置

1.点击某个标签,滚动到某个具体位置

    switchHeight(num) {

        this.selectNum = num;

        if (num == 0) {

          document.getElementById("identifer_one").scrollIntoView();

        } else {

          document.getElementById("hotel_two").scrollIntoView();

        }

      },

2.获取滚动高度,

 首先要先写监听事件:

  mounted() {

      window.addEventListener("scroll", this.handleScroll, true); //监听滚动事件

    },

处理监听事件:e.target.scrollTop是目标对象的滚动高度

handleScroll(e) {

        let serviceTop = 44;

        let hotelTop = 344;

        if (e.target.scrollTop > 44 && e.target.scrollTop < 344) {

          this.selectNum = 0;

        }

        if (e.target.scrollTop > 344) {

          this.selectNum = 1;

        }

      }

    },

vue中怎么做的无缝滚动?详细些,带代码

vue中的无缝滚动效果图:

三人行慕课

vue中的无缝滚动代码:

   

<template>    <div class='scroll'>         <ul :class='{animateTop}'>            <li                 v-for='(item,index) in scrollList'            >                {{item}}            </li>        </ul>             </div></template><script type="text/javascript">export default {    data () {        return {            animateTop:false,            scrollList:[                "妻子起步连撞5车",                "梅西点球扳平比分",                "阿迪商标被判无效",                "林志玲婚后首亮相",                "詹保罗AC米兰主帅",                "来自三人行慕课"            ]        }    },    methods:{        scrollSlide(){            this.animateTop = true;            setTimeout(()=>{ this.scrollList.push(this.scrollList[0]);this.scrollList.shift();   this.animateTop = false;             },500)         }    },    mounted(){        setInterval(this.scrollSlide,2000)    }}</script><style scoped>.animateTop{    transition: all .3s;    margin-top:-25px;}.scroll{    height: 50px;    width:100%;    background: #ccc;    overflow: hidden;    line-height: 25px;    font-size:16px;}</style>

   

如何控制scroller组件的滚动条位置

1、ScrollView 的滚动条默认置顶,若想设置它的位置,可以使用mScrollView.smoothScrollTo(x,y)方法,可达到效果。
2、crollTo方法可以调整view的显示位置。在需要的地方调用以下方法即可。
3、scroll表示外层的view,inner表示内层的view,其余内容都在inner里。
注意,方法中开一个新线程是必要的。否则在数据更新导致换行时getMeasuredHeight方法并不是最新的高度。
public static void scrollToBottom(final View scroll, final View inner) {
Handler mHandler = new Handler();
mHandler.post(new Runnable() {
public void run() {
if (scroll == null || inner == null) {
return;
}
int offset = inner.getMeasuredHeight() - scroll.getHeight();
if (offset < 0) {
offset = 0;
}
scroll.scrollTo(0, offset);
}
});
}

如何控制scroller组件的滚动条位置

1、ScrollView 的滚动条默认置顶,若想设置它的位置,可以使用mScrollView.smoothScrollTo(x,y)方法,可达到效果。
2、crollTo方法可以调整view的显示位置。在需要的地方调用以下方法即可。
3、scroll表示外层的view,inner表示内层的view,其余内容都在inner里。
注意,方法中开一个新线程是必要的。否则在数据更新导致换行时getMeasuredHeight方法并不是最新的高度。
public static void scrollToBottom(final View scroll, final View inner) {
Handler mHandler = new Handler();
mHandler.post(new Runnable() {
public void run() {
if (scroll == null || inner == null) {
return;
}
int offset = inner.getMeasuredHeight() - scroll.getHeight();
if (offset < 0) {
offset = 0;
}
scroll.scrollTo(0, offset);
}
});
}

Vuescroll - 一个基于Vue的虚拟滚动条

推荐一个基于Vue的滚动条-Vuescroll

GitHub地址: vuescroll

以前接触过一个后端管理系统, 叫H+, 偶尔发现它用的是左侧菜单没有滚动条, 于是, 我仔细查看dom, 发现H+ 左侧菜单的旁边有一个小的DIV, 我拖动的, 菜单竟然也能滚动, 我明白了, 这是用的虚拟滚动条, 我感觉这个挺不错的, 后来查看这个虚拟滚动条的源码, 发现是一个款叫做SlimScroll的基于jquery的库。由于我对Vue比较熟悉,所以,我想用Vue做一个类似的。

一开始用slimScroll的方法并不理想, slimscroll的滚动内容的方法是:

这有个2致命的缺点:

这两点带来了极差的UI体验!

后来, 我无意中发现了element-ui也是使用了虚拟滚动条, 并且效果很好, 尤其是在手机端滑动, 每次滑动结束手离开屏幕都能继续滑行一段距离, 比slimscroll效果要好,于是我就去element-ui的github上翻scrollbar的源码, 通过阅读源码, 我发现element-ui触发滚动的时机是在onscroll的时候, 也就是说, 把滚动内容的父元素设置为 overflow:scroll , 然后监听父元素的onScroll事件, 在onScroll事件的callback里面移动滚动内容即可。 经过我的一番改进, 终于能做到和element-ui滚动条滚动的一个效果了。

后来,我又接触到了几个不错的, 并把它们的特点加进来了。 如element-resize-detector, scroller, smooth-scroll, bertter-scroll等等。 现在的Vuescroll已经升级为一个功能强大的滚动条了。

它的基本特点有:

总的来说,Vuescroll不仅仅只一个滚动条, 你可以用它制作一个轮播图、时间选择器、能够自动侦测内容发生变化的一个插件等等。

部分参考资料

vue 监听某个div垂直滚动条下拉到底部的方法

如下所示:
this.$nextTick(()
=>
{
const
el
=
document.querySelector('.act-not');
const
offsetHeight
=
el.offsetHeight;
el.onscroll
=
()
=>
{
const
scrollTop
=
el.scrollTop;
const
scrollHeight
=
el.scrollHeight;
if
((offsetHeight
+
scrollTop)
-
scrollHeight
>=
-1)
{
//
需要执行的代码
}
};
});
坑:在做滚动加载分页时候,有时候第三方的弹窗如elementui
会出问题
,这时候需要watch变量弹窗关闭时修改el.scrollTop=0即可。
以上这篇vue
监听某个div垂直滚动条下拉到底部的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:vue
纯js监听滚动条到底部的实例讲解vue
中滚动条始终定位在底部的方法vue实现动态添加数据滚动条自动滚动到底部的示例代码Vue下滚动到页面底部无限加载数据的示例代码vue监听滚动事件实现滚动监听vue
每次渲染完页面后div的滚动条保持在最底部的方法

vue 监听某个div垂直滚动条下拉到底部的方法

如下所示:
this.$nextTick(()
=>
{
const
el
=
document.querySelector('.act-not');
const
offsetHeight
=
el.offsetHeight;
el.onscroll
=
()
=>
{
const
scrollTop
=
el.scrollTop;
const
scrollHeight
=
el.scrollHeight;
if
((offsetHeight
+
scrollTop)
-
scrollHeight
>=
-1)
{
//
需要执行的代码
}
};
});
坑:在做滚动加载分页时候,有时候第三方的弹窗如elementui
会出问题
,这时候需要watch变量弹窗关闭时修改el.scrollTop=0即可。
以上这篇vue
监听某个div垂直滚动条下拉到底部的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:vue
纯js监听滚动条到底部的实例讲解vue
中滚动条始终定位在底部的方法vue实现动态添加数据滚动条自动滚动到底部的示例代码Vue下滚动到页面底部无限加载数据的示例代码vue监听滚动事件实现滚动监听vue
每次渲染完页面后div的滚动条保持在最底部的方法

关于 VUE EL-TABLE 记录分页、记录选中行、记录滚动条光标

一:首先 创建 el-table

<el-table

ref="BaseTable"//设置 ref属性

:highlight-current-row="true"//高光选中行

:current-row-key="NowRowIndex"//行号

:row-class-name="tableRowClassName"//装载 EL-TABLE前执行的 方法 会遍历每一行 每一个单元格

@row-click="BaseRowClick">//添加行点击事件

二:添加 分页 组件 细节在于 :current-page.sync="currentPage" 不写这句 无效

<el-pagination

:current-page.sync="currentPage"

layout="prev, pager, next"

@current-change="current_change"//选中页 改变事件

:total="total"//总行数

:page-count="AllPageCount"//总页数

:page-size="pagesize"//每页显示的行数

background >

</el-pagination>

三:current_change()选中页 改变事件 记录当前选中的行号

current_change:function(currentPage){

this.currentPage = currentPage;

this.LastPageCount = currentPage

this.SetCreenRow(this.BaseInfoList[this.SelectDataIndex])

}

四:tableRowClassName()方法,给EL-TABLE设置行号

tableRowClassName ({row, rowIndex}) {

row.row_index = rowIndex;

}

五:行点击事件

BaseRowClick(row, column, event){

this.NowRowIndex = row.row_index;//记录点击行的行号

this.NowSelectNum = row.SuppliesNum//记录行数据中的一个唯一键 以便 绑定 记录的选中行

//记录点击行时的 纵轴滚动条位置

let vmEl = this. el

const scrollParent = vmEl.querySelector('.el-table__body-wrapper')

this.Nowscroll = scrollParent.scrollTop

}

六:刷新列表的方法 内 绑定 之前 选中的 页码 行 及 滚动条位置

//选中 之前记录的 分页页码

this.current_change(this.LastPageCount);

//设置 滚动条到之前记录的位置 细节在于必须加 setTimeout 否则无效

setTimeout(() => {

this.$refs.BaseTable.bodyWrapper.scrollTop = this.Nowscroll

}, 13)

vue项目记录移动端页面浏览位置

描述:假设b、c两个页面

需求:b到c页面的时候需要记录当前b的浏览位置,c返回到b的时候滚动到上次浏览的位置

实现方法:将滚动距离存在vuex、beforeRouteLeave

1.首先在vuex中state定义一个变量来记录当前的浏览的位置

2.在需要的页面中,也就是b页面使用了beforeRouteLeave 来记录没有路由离开的时候当前浏览的位置

其中to.meta.touFlag 是自己定义的,因为需要跳转的页面很多,这样比较方便,在需要的页面路由上加一个参数就好了

3.最后一步就是在每次b页面获取完数据的时候使用 nextTick ,让页面恢复到上次浏览的位置,一定要使用this.$nextTick

菲特宠物网还为您提供以下相关内容希望对您有帮助:

vue scroller返回页面记住滚动位置的实例代码

v-if="!$route.meta.keepAlive"&gt;&lt;/router-view&gt; 3,记录滚动位置并赋值 beforeRouteEnter(to,from,next){ if(!sessionStorage.askPositon || from.path == '/'){//当前页面刷新不需要切换位置 sessionStorage.askPositon = '';next();}else{ next(vm =&gt; { if(vm &amp;&amp; vm.$refs.my_scrolle...

Vuescroll - 一个基于Vue的虚拟滚动条

GitHub地址: vuescroll 以前接触过一个后端管理系统, 叫H+, 偶尔发现它用的是左侧菜单没有滚动条, 于是, 我仔细查看dom, 发现H+ 左侧菜单的旁边有一个小的DIV, 我拖动的, 菜单竟然也能滚动, 我明白了, 这是用的虚拟滚动条, 我感觉这个挺不错的, 后来查看这个虚拟滚动条的源码, 发现...

vue滚动scroll组件求推荐

vue-virtual-scroller - 带任意数目数据的顺畅的滚动 vue-infinite-scroll - VueJS的无限滚动指令 vue-scrollbar - 最简单的滚动区域组件 vue-scroll - vue滚动 vue-pull-to-refresh - Vue2的上拉下拉 mint-loadmore - VueJS的双向下拉刷新组件 vue-smoothscroll - smoothscroll的VueJS版本 ...

在angular中如何实现列表全选交互组件

比如:表格里就是简简单单的checkbox;图片列表这种,UI设计师会搞点花样,用户选择一下,会在图片上盖一层半透明的勾选提示等等。我们的系统是用angular 1.X版本开发。所以,我采用angular的装饰性指令编写几个指令,把它们配合在一起使用,来封装这样的场景。这与之前我们遇到的组件的开发思路又不太一...

vue制作app-如何优雅的使用vue+vux开发app

&lt;!DOCTYPE_tml&gt; __vue-vux __ __&lt;!--include_ux_tyle--&gt; __//_egister_omponents __("actionsheet",_uxActionsheet);__("address",_uxAddress);__("alert",_uxAlert);__("badge",_uxBadge);__("blur",_uxBlur);__("box",_uxBox);__("button-tab",_uxButtonTab);__(...

在Webpack中如何构建Electron应用

当你的操作需要通过操作系统去完成时,网页会通过 Node.js 去和操作系统交互。采用这种方式开发桌面端应用的优点有:降低开发门槛,只需掌握网页开发技术和 Node.js 即可,大量的 Web 开发技术和现成库可以复用于 Electron;由于 Chromium 浏览器和 Node.js 都是跨平台的,Electron 能做到写一份代码在不...

为什么win7下安装vue-scroller会报错

亲,这个问题我遇过,原因是maya安装包的存储路径中有中文,比如你的安装包存储在F盘,那么它在F盘的目录必须是英文才行。当然了,他的安装目录最好也是英文。注意:安装包目录指的是你从官网下载下来的软件安装包目录,安装目录是指你要把软件安装到哪里。这两个目录都改为英文的。

在JavaScript中如何实现读取和写入cookie

在JavaScript中,使用document对象的cookie属性来储存和获取cookie.通常,document.cookie里的信息是由成对的名称和值组成的字符串,每一对数据的形式是:name=value;下面我们将通过一个简单的例子来展示在JavaScript中如何读取和写入cookie.首先是createCookie.html,在该页面中会创建一个cookie,完整的代码如下...

vue高德地图 如何一次添加多个点标记到地图实例?

首先你需要提交你的公司的资料信息,地址信息 ,公司名称 以及电话信息,门脸照片给官方,提交给官方后,他们会审核的,一般都是 1-7个工作日审核 审核通过后1-3天时间展现 如果发现地图有错误,可以进行纠错处理。

Top