vant滚动加载更多,vant左右滑动组件
这篇文章主要介绍了栈列表组件滚动保留滚动条位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
栈列表组件滚动保留滚动条位置，需结合保持活跃使用，分享此篇，供大家参考。
1、保存位置的前提是用的保持活跃组件来做缓存，app.vue代码
模板
div id=应用程序
点火电极
路由器-查看v-if= $ route。meta。keepalive /
/保持活力
路由器-查看v-if=！$route.meta.keepAlive/
/div
/模板
2、在路由文件router.js，给每个路由自指的添加滚动顶部和保持活跃
{
路径："/home "，
姓名：家，
component:resolve=require([ @/views/home/index。vue ]，解决)，
元：{
标题： 首页，
指数：1,
保持活动状态：真的，
滚动条：0
}
},
{
路径："/分类"，
名称：分类，
component:resolve=require([ @/views/classify/index。vue ]，解决)，
元：{
标题： 分类，
指数：1,
保持活动状态：真的，
滚动条：0
}
},
{
路径："/购物",
名称：购物，
component:resolve=require([ @/views/shopping/index。vue ]，解决)，
元：{
标题： 购物车，
指数：1,
保持活动状态：真的，
滚动条：0
}
},
{
路径："/详细"，
名称：详细信息，
component:resolve=require([ @/views/detail/index。vue ]，解决)，
元：{
标题： 详情，
指数：2,
//keepAlive: true，
//scrollTop: 0
}
},
3、然后在main.js，记录滚动条的位置
router.beforeEach(收件人，发件人，下一个)={
if (from.meta.keepAlive) {
const $ wrapper=document。查询选择器(.app-wrapper’)；//列表的外层容器注意找到滚动的盒子
const scrollTop=$wrapper？$包装。滚动顶部：0；
console.log(scrollTop=，scrollTop)
从。meta。滚动顶部=滚动顶部；
}
next()；
});
4、最后在需要记录保留滚动条位置的地方获取通过已激活（这个函数每次进入页面都会执行，只有结合使用保持活跃组件才有效)来获取滚动顶部
已激活(){
const scrollTop=this .$ route。meta。滚动顶部；
const $ wrapper=document。查询选择器(.app-wrapper’)；
if (scrollTop $wrapper) {
$包装。滚动顶部=滚动顶部；
}
},
比如缓存了某些页面也不想随之滚动，则把滚动顶部置0即可；
已激活(){
const $ wrapper=document。查询选择器(.app-wrapper’)；
$包装。scroll top=0；
},
注意，页面滚动的话，其他页面有滚动条的也会随之滚动，可以对其他页面里面处理，或者判断是否从详情页到列表页来判断是否缓存位置，如果不是，则回到顶部，但是注意路由钩子函数这的使用；
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。