关于vue2.0网页无限加载下一页、返回顶部、返回底部、阻止浏览器物理返回

K_light0623

于 2023-06-12 11:56:41 发布

阅读量977

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_39605226/article/details/131164886

版权

1、针对整个页面不断加载新数组内容

（1）、首先监听scroll事件（创建监听的函数在mounted中）

	this.$nextTick(() => {//页面内容渲染完成后再监听scroll事件
        window.addEventListener('scroll', this.getScroll,false)
    })

注释： this.getScroll是methds中的函数，千万要注意不能使用this.getScroll()只能用this.getScroll

（2）、关于this.getScroll方法中的内容

getScroll() {
 		const that = this
	   let clientHeight = document.documentElement.clientHeight; //可视区域
	   let scrollHeight = document.body.scrollHeight; // 滚动文档高度
	   let scrollTop = parseInt(document.documentElement.scrollTop); // 已滚动的高度
	   if (scrollTop > clientHeight) {   //当滚动条的高度大于视窗高度开始进行事件操作
	       this.toTop = true   //是否展示返回顶部的按钮
	   } else if (scrollTop <= clientHeight) {  //当滚动条的高度小于于视窗高度开始进行事件操作
	       this.toTop = false //是否展示返回顶部的按钮
	   }
	   if (scrollTop > scrollHeight - 2 * clientHeight) {  //针对滚动事件触发后，不断的加载页面内容
	           that.param.pageIndex += 1 //新的页面index
	           that.getList()  //获取新的列表内容
	   }
},

（3）、在离开页面的时候千万要记得移除监听事件

	beforeDestroy() {
        window.removeEventListener("scroll",this.getScroll,false);
    },

2、整个页面返回顶部

在vue项目中将事件写在mian.js中

//返回顶部
Vue.prototype.topScroll = function () {
  window.scrollTo({
    top: 0,
    left: 0,
  });
}

在页面调用的时候直接采用this.topScroll()

3、整个页面返回底部

在vue项目中将事件写在mian.js中

Vue.prototype.bottomScroll = function () {
  window.scrollTo({
    top: document.body.scrollHeight,
    left: 0,
  });
}

在页面调用的时候直接采用this.bottomScroll()

4、阻止在vue中的物理返回

针对vue的返回按钮，有在beforeRouter中来进行拦截，那么每一次都需要重新获取对应的登录验证，因此为了快速开发简单粗暴点选择这种方式：

//防止页面后退  使用在vue时 挂载到mounted中
      history.pushState(null, null, document.URL);
      window.addEventListener('popstate', function () {
          history.pushState(null, null, document.URL);
      });