vue通过 vue.mixin(混合)实现 任意页面记录滚动条位置(路由router.query参数一致) 并跳转到上次的位置
来源:互联网 发布:网络电影扫黄完整版 编辑:程序博客网 时间:2024/05/17 02:04
main.js 中编写全局混合事件,会在子组件前出发对应事件,此功能需要以下几个条件:
1.滚动页面必须为 keep-alive:true,
通过meta.keppAlive去动态加载需要缓存的组件,以后只需要在路由index.js里把false改成true
/*
* 核心代码
*/
Vue.mixin({
data(){return {
prev_Scroll_Top:0,
prev_Page_Param:null,
cur_Page_Param:null,
scrollBox:"",
scrollContent:"",
}
},
methods:{
_jmpScroll(){
if(this.prev_Scroll_Top){
console.log("needJmp");
var self = this;
$(self.scrollBox).scrollTop(self.prev_Scroll_Top + 30);
}
},
_calcParams(){
var curparams = null;
var fullPath = this.$route.fullPath;
var ind = fullPath.indexOf("?");
if(ind>-1){
curparams = fullPath.substr(ind+1,fullPath.length);
}
this.cur_Page_Param = curparams;
if((this.prev_Page_Param == this.cur_Page_Param) && this.cur_Page_Param){
this._jmpScroll();
}else{
this.prev_Scroll_Top=0;
}
this.prev_Page_Param = this.cur_Page_Param;
this.cur_Page_Param = null;
},
_divBindScroll(){
var self = this;
$(self.scrollBox).scroll(function(){
var BoxoffsetHeight = Math.abs($(self.scrollContent).offset().top);
console.log(BoxoffsetHeight);
self.prev_Scroll_Top = BoxoffsetHeight;
});
}
},
activated(){
this._calcParams();
this._divBindScroll();
}
})
var vm = new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: {
App
}
})
注:子组件data中需要加入以上两个对应的滚动盒子和内容。scrollBox: scrollContent:,例如:
切换页面时,判断是否跳转滚动位置,是根据query的参数,所以如果你没有参数,此情况不适用。
阅读全文
0 0
- vue通过 vue.mixin(混合)实现 任意页面记录滚动条位置(路由router.query参数一致) 并跳转到上次的位置
- vue-router如何在返回时返回到上次滚动位置 方法集锦
- vue-router如何在返回时返回到上次滚动位置 方法集锦
- vue 滚动条实现平滑滚动到某个位置
- vue router 记住页面位置
- vue-router跳转页面
- vue-router跳转页面
- vue通过滚动行为实现从列表到详情,返回列表原位置
- vue.js用vue-router路由传参时页面刷新后参数消失的问题
- Vue.js实战之利用vue-router实现跳转页面
- 微信文章webview记录上次访问位置的实现原理和代码,webview记录并定位到上次访问位置
- 使用 vue-router 跳转页面
- 使用vue-router页面跳转
- vue 路由vue-router
- vue路由 vue-router
- Vue 路由 vue-router
- js:返回到页面时滚动到上次浏览位置
- vue 页面跳转(兄弟组件)通过路由或vuex 进行传递参数,并且实现刷新数据不消失
- python设计模式总结
- java中ArrayList源码方法理解--add(),remove()
- 私有云落地解决方案之网络篇-关键技术-快速重路由FRR
- mq操作相关指令
- MongoDB3.2 之 oplogSize修改
- vue通过 vue.mixin(混合)实现 任意页面记录滚动条位置(路由router.query参数一致) 并跳转到上次的位置
- spring-task的属性理解
- JS中图片压缩的一般方法
- [HAOI2010]订货
- fiddler 右键功能汇总
- 一元二次方程的因式分解 X的二次方+X-12=0如何用因式分解
- Vue.js源码解析(七)【聊聊Vue.js的template编译】
- 链表(单向、双向、单向循环、双向循环)
- 【rabbitmq】Linux下面安装包形式安装