精华内容
下载资源
问答
  • vue滚动分页加载数据

    2019-03-05 16:50:37
    var vm = new Vue({ el:"#app", data:{ containerHeight:0, //获取容器高度 contentHeight:0,//加载数据内容高度 pageNum:1, //页数 pageCount:15, //条数 isPullupLoadData:...
    <div class="content" ref="scrollContainer" @scroll="LoadMore()">
    	<ul ref="tabContent">
    		<li  class="list-item" v-for='item in ShareList'>
    						
    		</li>
    	</ul>
    </div>
    			var vm = new Vue({
    				el:"#app",
    				data:{
    					containerHeight:0, //获取容器高度
    	    			contentHeight:0,//加载数据内容高度
    	    			pageNum:1, //页数
    	    			pageCount:15, //条数
    	    			isPullupLoadData:false    //是否继续请求
                        }
    				mounted(){
    					var _self=this;
    					_self.containerHeight=_self.$refs.scrollContainer.offsetHeight;  //获取容器高度
    				},
    					//		请求数据
    					requested(){
    						var _self=this;
    						var params = {
    					      "token": app.globalData.token + "",
    					      'pageNum':_self.pageNum +'',
    					      'pageCount':_self.pageCount +''
    					    };
    					    app.requestMethod("getShareDetail",params,function(res){
    					    	console.log(res);
    					    	if(res.data.code==200){
    					    		console.log(res.data.data)
    					    		_self.ShareList = res.data.data.list;
    					    		console.log(_self.ShareList)
    					    		_self.$nextTick(function(){
    					    			_self.contentHeight=_self.$refs.tabContent.offsetHeight;
    					    			_self.isPullupLoadData = true;
    						    		console.log(res.data.data.length)
    						    		console.log(_self.containerHeight)
    					    		})
    					    		
    					    	}
    					    });
    					},
    				LoadMore(){
    				    var _self=this;
    					var scrollTop=_self.$refs.scrollContainer.scrollTop;
    			    	//判断是否已经到了底部50px处
    			    	//到了,判断是否还可以继续加载
    			    	//可以加载请求数据,渲染后重新获取tabContainer高度
    			    	//再判断数据是否已经加载完毕了
    //			    	console.log(scrollTop);
    			    		
    			    	if(_self.isPullupLoadData==true){
    			    		if(scrollTop+_self.containerHeight>_self.contentHeight-30){
    			    			_self.isPullupLoadData = false;
    			    			_self.pageNum=_self.pageNum+1;
    		    				var params = {
    							    "token": app.globalData.token + "",
    							     'pageNum':_self.pageNum +'',
    							     'pageCount':_self.pageCount +''
    							    };
    							 app.requestMethod("getShareDetail",params,function(res){
    							 console.log(res);
    							 if(res.data.code==200){
    							    console.log(res.data.data)
    							    var data= res.data.data.list;
    							    _self.ShareList=_self.ShareList.concat(data);
    							    			                
                                   _self.contentHeight=_self.$refs.tabContent.offsetHeight;
    								    		
    							    if(res.data.data.list.length !=0){
    							    	_self.isPullupLoadData = true;
    							    }
    							    	}
    							    });
    				    		}
    			    		}

     

    展开全文
  • vue实现滚动加载指令

    2021-04-15 15:50:46
    因项目中需实现滚动分页,但是使用v-infinite-scroll渲染时会触发,所以自己实现滚动加载指令来替代 前提条件: jquery.js:使用了jquery计算元素高度,可自行替代为原生JavaScript lodash.js:使用lodash处理滚动...

    滚动加载指令,附源码和使用案例,可直接使用。

    背景:

    因项目中需实现滚动分页,但是使用v-infinite-scroll渲染时会触发,所以自己实现滚动加载指令来替代

    前提条件:

    • jquery.js:使用了jquery计算元素高度,可自行替代为原生JavaScript
    • lodash.js:使用lodash处理滚动节流,可自行取消节流、或替代为原生JavaScript实现

    实现思路:

    通过监听滚动事件,判断滚动到最底部时,触发加载事件

    如何判断是否滚动到最底部呢:

    这里我们通过判断:容器内的滚动距离是否大于或等于,容器的所有子级高度(包括border,padding,margin)减 容器自身的高度的差,如果满足,则认为已经滚动至底部
    滚动距离 >= 子级高度 - 自身高度

    我们设容器为container,那么:
    container的所有子级高度:可以通过遍历其直接子级,并计算子级offsetHeight的总和
    container的滚动距离:可以通过jquery的scrollTop()获取
    container的高度:可以通过jquery的height()获取

    我们有了大概的思路,下面,将使用vue的指令实现滚动加载
    我们使用了自定义指令directivesinserted钩子来实现

    inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

    inserted会接受3个参数,el、binding、vnode,这里我们只使用el,和binding
    el是我们的容器实例,$(el)可以获取到容器的dom。
    binding.value则是我们绑定的事件,例如v-load-more=“loadMore”,binding.value就是loadMore

    代码实现:

    v-load-more指令的代码实现:

    directives: {
      /* 通过判断 滚动距离 >= 子级高度 - 自身高度
         如果为true则认为到达底部 */ 
       loadMore: {
         inserted(el, binding) {
           const scrollFn = () => {
             // 子级高度
             let scrollH = 0
             $(el).children().each((idx, item) => {
               scrollH += $(item).get(0).offsetHeight
             })
    
             let wrapH = $(el).height() // 自身高度
             let scrollT = $(el).scrollTop() // 滚动距离
             let isBottom = scrollT >= scrollH - wrapH
             if (isBottom) {
               binding.value && binding.value() // binding.value获取到绑定的事件
             }
           }
           
           // 使用lodash的throttle函数进行节流处理
           $(el).on('scroll', _.throttle(scrollFn, 100))
         }
       }
     },
    

    附使用案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    </head>
    <body>
      <div id="app">
        <div class="list-container" v-load-more="loadMore">
          <div>
            <div class="list-item" v-for="(item, idx) in list" :key="idx">
              {{item}}
            </div>
          </div>
        </div>
      </div>
    </body>
    </html>
    
    <script>
    var app = new Vue({
      el: '#app',
      data: {
        list: 20,
      },
      directives: {
        /* 通过判断 滚动距离 >= 子级高度 - 自身高度
          如果为true则认为到达底部 */ 
        loadMore: {
          inserted(el, binding) {
            const scrollFn = () => {
              // 子级高度
              let scrollH = 0
              $(el).children().each((idx, item) => {
                scrollH += $(item).get(0).offsetHeight
              })
    
              let wrapH = $(el).height() // 自身高度
              let scrollT = $(el).scrollTop() // 滚动距离
              let isBottom = scrollT >= scrollH - wrapH
              if (isBottom) {
                binding.value && binding.value()
              }
            }
            $(el).on('scroll', _.throttle(scrollFn, 100))
          }
        }
      },
      methods: {
        loadMore() {
          this.list += 20
        }
      },
    })
    </script>
    
    <style>
      .list-container {
        margin: 0 auto;
        height: 500px;
        width: 400px;
        overflow-y: auto;
      }
      .list-item {
        line-height: 60px;
        text-align: center;
        background: #ccc;
        border-bottom: 1px solid #fff;
      }
    </style>
    

    github仓库源码

    在线演示




    ps:转载请注明出处
    展开全文
  • Vue 无限滚动分页加载

    千次阅读 2019-06-04 11:35:55
    npm install vue-infinite-scroll --save 1 2. main.js中配置并使用 import infiniteScroll from ‘vue-infinite-scroll’; Vue.use(infiniteScroll) 1 2 3. 用法 1.放在底部 1 2 3 2.方法 var count = 0; 新的...
    1. 安装

    npm install vue-infinite-scroll --save
    1
    2. main.js中配置并使用

    import infiniteScroll from ‘vue-infinite-scroll’;
    Vue.use(infiniteScroll)
    1
    2
    3. 用法

    1.放在底部

    1 2 3 2.方法

    var count = 0;

    新的Vue({
    el:’#app’,
    数据:{
    数据:[],
    忙:假
    },
    方法: {
    loadMore:function(){
    this.busy = true;

      setTimeout(()=> {
        for(var i = 0,j = 10; i <j; i ++){
          this.data.push({name:count ++});
        }
        this.busy = false;
      },1000);
    }
    

    }
    })


    作者:少女彤
    来源:CSDN
    原文:https://blog.csdn.net/weixin_43244655/article/details/83477490
    版权声明:本文为博主原创文章,转载请附上博文链接!

    展开全文
  • //监听页面滚动事件 window.addEventListener("scroll", this.handleScroll); } //methods里面的方法 handleScroll() { //窗口滚要做的操作写这里 let sh = document.documentElement.scrollHeight || ...
    mounted() {
        //监听页面滚动事件
        window.addEventListener("scroll", this.handleScroll);
      }
      
    //methods里面的方法
    handleScroll() {
        //窗口滚要做的操作写这里
        let sh = document.documentElement.scrollHeight || document.body.scrollHeight; // 滚动条高度
        let st = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条距离顶部的距离
        let ch = document.documentElement.clientHeight || document.body.clientHeight; // 滚动条外容器的高度
        if (st + ch >= sh-20) {
           //快到底时----加载
           if(this.total && this.list.length<this.total){
             this.currentPage++
             this.reloadList(); // 加载数据的方法 
           }
         }
     },
     reloadList(){
     }
    

    1.需要判断滚动条是否到底部:

    需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。

    scrollTop为滚动条在Y轴上的滚动距离。

    clientHeight为内容可视区域的高度。

    scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。

    从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

    2.监听页面还是某个元素,上面是监听页面,下面监听某一部分。

    <template>
        <div>
            <div class="head">结果记录</div>
            <div class="lotteryrecord">
                <div id="resultScroll"  ref="myScrollbar" style="height: 300px;overflow:auto">
                    <div class="list-div" v-for="item in list">
                        <span>{{item.sceneSn}}</span>
                        <span>{{item.result}}</span>
                    </div>
                </div>
            </div>
        </div>
    </template>
    
    mounted(){
                let that = this
                 // 监听滚动事件
                document.getElementById('resultScroll').addEventListener('scroll', that.handleScroll,true)
            },
            methods: {
                handleScroll(){
                    let that = this
                    let sh = that.$refs['myScrollbar'].scrollHeight // 滚动条高度
                    let st = that.$refs['myScrollbar'].scrollTop // 滚动条距离顶部的距离
                    let ch = that.$refs['myScrollbar'].clientHeight // 滚动条外容器的高度
                    if (st + ch >= sh) {
                        //到底了-业务逻辑
                        that.tradPageNo += 1
                        if(that.tradPageNo<=that.resultList.page.totalPage){
                            that.getResultList()
                        }
                    }
                },
                // 获取结果列表
               	getResultList() { }
            }
    
    

    为了避免每次滚动都触发事件,可以在滚动事件外增加节流方法。

    展开全文
  • 不用插件vue实现滚动加载

    千次阅读 2018-05-16 12:01:59
    关键所在是实现滚动到底部,然后进行post请求,然后将获得的分页的数据push到数组中1,在data中定义三个变量page,isadd,data_wrpa其中page是控制分页的,isadd是控制是否post的,data_wrpa是数据的容器2,给容器绑定...
  • }, //滚动分页加载数据 scroll(person) { let isLoading = true;//是否有数据可以加载 window.onscroll = async () => { // 距离底部200px时加载一次 let bottomOfWindow = document.documentElement.offsetHeight ...
  • .scrollHeight // 滚动条高度 let st = this.$refs['myScrollbar'].scrollTop // 滚动条距离顶部的距离 let ch = this.$refs['myScrollbar'].clientHeight // 滚动条外容器的高度 if (st + ch >= sh) { //到底了-...
  • 最近的一个项目手机端分页跳转不理想,自己做了一个滚动加载的一个Demo,下面话不多说了,来一起看看详细的介绍吧。 实现思路  1.获得滚动条到底部的距离 getScrollBottomHeight()  2.绑定滚动事件handleScroll...
  • Vue中的滚动加载事件

    2021-04-14 15:51:20
    Vue中的滚动加载事件 项目中经常会遇到分页加载的事件,而很多常规的处理方式都是采用滚动加载。 本人目前经常用到的实现滚动加载方式是: ①:利用组件库的list列表组件,这里用vant举例 ②:利用window....
  • 项目手机端分页跳转不理想,自己做了一个滚动加载的一个Demo 核心Dom结构 <body> <div id="Content"> <div> ...
  • 最近接了一个需求,是微信浏览器监听用户上拉操作,从而实现页面滚动加载的效果。其实网上已经有很多类似成熟的栗子了,但是由于自己开发经验有限,所以第一次看到这个需求的时候也是一百脸茫然,当时不知道网上有...
  • 项目手机端分页跳转不理想,自己做了一个滚动加载的一个Demo 核心Dom结构 <body> <div id="Content"> <div> <ul> <li v-for="l in list">{{l.title}}</li...
  • npm install vue-pull-to --save //然后引进来,放在组件上面注册好 import PullTo from ‘vue-pull-to’ 官网文档在这里:https://github.com/stackjie/vue-pull-to/blob/master/README.zh-CN.md 页面内容: <...
  • 1、滚动条懒加载实现分页数据获取 首先在文件夹directive下的directive.js文件夹中定义全局指令 如下: 'use strict'; /** * * * 添加所有的全局指令 * * */ import Vue from 'vue' // 聚焦指令 // ...
  • vue-infinite-scroll 滚动分页加载

    千次阅读 2018-07-03 13:28:31
    1、安装插件npm i --save v-infinite-scroll2、使用main.jsimport infiniteScroll from 'vue-infinite-scroll'Vue.use(infiniteScroll);.vue文件 &lt;div class="content clearfix"&gt; &...
  • 因为移动端滚动加载分页是必须做的,网上也有很多插件,我用的是pull-to,这个很简单,先安装一波,npm install vue-pull-to --save//然后引进来,放在组件上面注册好import PullTo from 'vue-pull-to'官网文档在这里...
  • npm install vue-infinite-scroll --save 管官方也推荐了几种载入方式,但“最vue”的方式肯定是在main.js中加入: import infiniteScroll from 'vue-infinite-scroll' Vue.use(infiniteScroll) 实现范例 ...
  • 3,vue-infinite-scroll 一个滚动插件 i --save 安装 加载中... fn loadMore 生效时的回掉函数 可以在里面执行请求 boolean busy 默认 false 表示生效 触发时会执行 loadMore 方法 true 的时候失效 不会在...
  • HTML和滚动事件 ... LOCK_STATUS: false, //当在请求数据时,滚动时锁定不能再发送分页请求 datas: []//临时存储数据 } }, 加载数据请求:默认第一个,一页家在10条 async getApplyData(type) { thi.

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 137
精华内容 54
关键字:

vue分页滚动加载

vue 订阅