Vue中判断页面是否到达底部

第一步:

mounted() {
	    window.addEventListener('scroll', this.handleScroll)
	  },

第二步:

methods:{
    handleScroll() {
		    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
		    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
		    const clientHeight = document.documentElement.clientHeight || window.innerHeight
		    if (scrollTop + clientHeight >= scrollHeight) {
		    	加载更多。。。
		      	
		    }
		},
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue可以使用Vue指令来监听滚动事件,然后通过判断滚动条的位置来判断是否到达底部。 以下是一个简单的示例代码: ```html <template> <div class="scroll-container" v-scroll-end="onScrollEnd"> <!-- 这里是滚动内容 --> </div> </template> <script> export default { directives: { // 定义一个名为'scroll-end'的指令 'scroll-end': { bind: function (el, binding) { el.addEventListener('scroll', function () { if (binding.value(el)) { // 当滚动到底部时执行指令绑定的函数 binding.arg(); } }); } } }, methods: { onScrollEnd: function () { console.log('已经滑动到底部了'); } } } </script> ``` 在这个示例代码,我们定义了一个名为`v-scroll-end`的指令,并将它绑定到一个包含滚动内容的`div`元素上。当指令被绑定时,我们监听`scroll`事件,并在事件回调函数判断滚动条的位置是否到达底部。如果到达底部,则执行指令绑定的函数(在这个示例代码是`onScrollEnd`方法)。 在`v-scroll-end`指令的定义,我们使用了`binding.value(el)`来获取指令绑定的值,并将滚动元素`el`作为参数传递给它。这里的`binding.value`是一个函数,它返回一个布尔值,用来判断是否到达底部。在这个示例代码,我们使用了以下的判断条件: ```javascript binding.value(el) === true ``` 当滚动条的位置接近底部时,`binding.value(el)`会返回`true`,从而触发指令绑定的函数。您可以根据需要自定义判断条件,来适应不同的滚动场景。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值