vue2的scroll监听-下拉记载更多

最新推荐文章于 2024-07-15 17:50:58 发布
最新推荐文章于 2024-07-15 17:50:58 发布
阅读量688 收藏 1
点赞数
分类专栏： 学习随笔 文章标签： javascript vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44382590/article/details/121368092
版权
本文介绍了在Vue2中如何正确监听scroll事件，解决监听失效的问题。关键在于在addEventListener中第三个参数传入true。此外，还探讨了利用scroll事件实现下拉加载更多的功能，通过scrollTop属性来判断何时加载更多内容。
摘要由CSDN通过智能技术生成

vue2的scroll事件

vue中监听scroll事件

注意！你的容器得有一定高度，或者说能撑出来滚动条

通常来说是以下这样子的：

​ 添加原生监听

// 添加监听
mounted(){
   
  window.addEventListener("scroll", this.scrollHandle);
}

​ 使用vue官方的v-on监听


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  Jasonk0
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
Vue2-虚拟滚动

				
			

			

				

					qq_36303110的博客
				

				

					05-05
					
					870
					
				

			

		

		

			
				
<template>
  <div class="scroll-container" ref="scrollContainer">
    <div class="scroll-viewport" :style="{transform: `translateY(${offset}px)`}">
      <div class="scroll-item" v-for="item in visibleData" :key="item[keyValue] || item

			
		

	



                

              
                



	

		

			

				
					
vue2中使用better-scroll插件实现滚动效果

				
			

			

				

					qq_43650979的博客
				

				

					02-10
					
					474
					
				

			

		

		

			
				
vue2中使用better-scroll实现滚动效果
1.npm安装插件
(1)到github上查看最新版本号
(2)在package.json中添加依赖

（3）执行npm install安装，安装成功后node_module目录下生成了better-scroll文件夹

2.使用插件
（1）在需要实现滚动效果的组件中引入插件
import BScroll from 'better-scroll...

			
		

	



                


  
              

                


	

		

			

				
					
vue2中使用 better-scroll

				
			

			

				

					weixin_34301307的博客
				

				

					11-15
					
					173
					
				

			

		

		

			
				
使用时有三个要点：
一：html部分
　　

<div class="example" ref="divScroll">
    <div>
        <p>内容1</p>
        <p>内容2</p>
        <ul>
              <li>lis...

			
		

	





	

		

			

				
					
vue2 ant-design select组件自定义下拉框， dropdownRender 使用，以及遇到的坑

					
最新发布

				
			

			

				

					weixin_43978501的博客
				

				

					07-15
					
					985
					
				

			

		

		

			
				
业务需求：下拉框需要满足用户可输入筛选 和 点击右侧 字符按钮 #A-Z进行用户选择。就是在同一个页面，渲染同一个组件时，在点击前一个组件后，后面的组件右侧按钮滚动失效。2、script中的代码。4、遇到的坑是什么呢？

			
		

	



		

			
		



	

		

			

				
					
vue 局部监听下拉框滚动(@scroll=)

				
			

			

				

					weixin_47382414的博客
				

				

					05-17
					
					831
					
				

			

		

		

			
				
需求：页面局部box列表滚动，数据初始显示十条，触底后显示下个十条。
由于后台返回了全部数据，所以数据就需要自己处理了；
给父盒子添加@scroll=“scrollEvent” 可获得父盒子的可视高度和滚动条高度(盒子本身要有高度才会被触发)
父盒子固定高度用于滚动条及触发，关系对比中，文档高度要获取子盒子的
<div class="user-right-card" ref="card" @scroll="scrollEvent">
	 <div ref="cardChild">&l

			
		

	





	

		

			

				
					
vue中监听滑动（并解决滑动scrollTop一直为0问题）

				
			

			

				

					jiangjunyuan168的博客
				

				

					04-19
					
					3531
					
				

			

		

		

			
				
一、代码实现
1、监听整个窗口（window）的滑动
在mounted钩子函数里添加：
mounted() {
   window.addEventListener('scroll',this.handleScroll,true)
}

然后在methods里创建绑定的方法：
 methods: {
  handleScroll(){
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  

			
		

	





	

		

			

				
					
vue使用better-scroll实现下拉刷新、上拉加载

				
			

			

				

					10-17
				

			

		

		

			
				
在Vue中集成better-scroll可以实现更复杂的滚动效果，如下拉刷新和上拉加载。本文将详细讲解如何在Vue项目中使用better-scroll实现下拉刷新和上拉加载功能。  首先，需要在Vue项目中安装better-scroll插件。你可以...

			
		

	





	

		

			

				
					
vue监听scroll的坑的解决方法

				
			

			

				

					01-19
				

			

		

		

			
				
今天想在vue的项目里面用下拉加载，然后就直接写了:  但是我发现我切换路由以后依旧其他页面也触发了scrollHandler函数，然后我想到使用了vue-router做的spa项目，window对象不变的，所以需要在每次使用后销毁。 ...

			
		

	





	

		

			

				
					
滚动条插件vue-scroll

				
			

			

				

					qq_44797702的博客
				

				

					03-29
					
					6779
					
				

			

		

		

			
				
vuescroll 是一个基于vue.js 2.X虚拟滚动条， 它支持定制滚动条的样式，检测内容尺寸变化、能够使内容分页、支持上拉-刷新，下推加载等诸多特性。

			
		

	





	

		

			

				
					
vue移动端实现下拉刷新

				
			

			

				

					08-27
				

			

		

		

			
				
同时，你还可以使用现成的库，如`better-scroll`或`vue-swing`，它们提供了更完善的下拉刷新和上拉加载功能，且易于集成和配置。  通过理解基本原理和实践，你可以轻松地在Vue项目中实现下拉刷新，提升用户的交互...

			
		

	





	

		

			

				
					
Vue3 滚动盒子组件,scroll,overflow-y:scroll

				
			

			

				

					weixin_43029943的博客
				

				

					05-25
					
					1398
					
				

			

		

		

			
				
Vue3 滚动盒子组件,scroll,overflow-y:scroll

			
		

	





	

		

			

				
					
Vue2 封装 better-scroll 插件，实现顺滑的滚动效果

				
			

			

				

					Lyrelion的博客
				

				

					08-27
					
					1860
					
				

			

		

		

			
				
1. batter-scroll 原理

2. 初始化 batter-scroll 的正确姿势

3. better-scroll 注意事项

4.在 Vue2 中使用 better-scroll

4.1 Vue2 中，初始化 better-scroll 的注意事项

4.2 better-scroll 请求异步数据

4.3better-scroll 的封装

4.4better-scroll上拉加载下拉刷新

			
		

	





	

		

			

				
					
vue监听滚动条

				
			

			

				

					qcg14774125的博客
				

				

					10-09
					
					6634
					
				

			

		

		

			
				
网上看了一大堆，发现都不能用，于是结合了他们的经验自己补全了


  mounted(){
      window.addEventListener('scroll',this.handleScroll,true)
    },
    methods:{
      handleScroll(e){
        console.log(e.target.scrollTop)
      }...

			
		

	





	

		

			

				
					
vue2实现列表自动滚动

				
			

			

				

					DZQ1223的博客
				

				

					04-26
					
					1051
					
				

			

		

		

			
				
【代码】vue2实现列表自动滚动。

			
		

	





	

		

			

				
					
vue2使用“vue-j-scroll”实现自动滚动

				
			

			

				

					qq_46131497的博客
				

				

					08-18
					
					2626
					
				

			

		

		

			
				
的样式一定要设置高度，(vue-j-scroll一定要设置高度)，外面包着vue-j-scroll的盒子也要设置高度。这句话，因为我是父传子，所以在监听数据变化的时候加的，如果你是通过方法发送ajax请求后接收的数据，放在后面是一样的。使用（这里循环的数据和data的数据要一样的，list-style是写的样式高度，后面我会说我写这个踩到的坑）小伙伴可能会遇到，就是一开始数据比较多的时候，会开始滚动，但是在自动更换数据后，页面开始闪动的问题，只需要给。”，在切换数据的时候，加上。

			
		

	





	

		

			

				
					
VUE写下拉选择框

					
热门推荐

				
			

			

				

					tangweiee的博客
				

				

					07-12
					
					1万+
					
				

			

		

		

			
				
1.效果如下：



2.代码


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 练习 - 下拉框</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"&...

			
		

	





	

		

			

				
					
Vue 2 Scrollbar：定制化滚动条组件的完美选择

				
			

			

				

					gitblog_00089的博客
				

				

					05-28
					
					465
					
				

			

		

		

			
				
Vue 2 Scrollbar：定制化滚动条组件的完美选择
 vue2-scrollbarThe Simplest Pretty Scroll Area Component with custom scrollbar for Vue 2. https://bosnaufal.github.io/vue2-scrollbar项目地址:https://gitcode.com/gh_mirrors/vu...

			
		

	





	

		

			

				
					
vue2级连动下拉框，及其加载按钮

				
			

			

				

					qq_42751769的博客
				

				

					07-14
					
					1456
					
				

			

		

		

			
				
实现一个二级下拉框，第二个下拉框随第一个下拉框的值改变，而动态改变。并实现，一个加载按钮，点击后切换到，其他数据源。
下面附上代码：
<template>
  <div class="screen-container">
    <header class="screen-header">
      <div class="title-right">
        <img v-bind:src=shebeitiaoshikuang class="s

			
		

	





	

		

			

				
					
vue2 中实现el-autocomplete 下拉加载更多

				
			

			

				

					05-24
				

			

		

		

			
				
在 Vue2 中实现 `el-autocomplete` 下拉加载更多的方法可以通过监听 `input` 事件，在输入框中输入字符时触发一个方法来获取更多的数据。当滚动到下拉框底部时，再次触发这个方法获取更多的数据。  下面是一个简单的...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值