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

    2019-03-05 16:50:37
    contentHeight:0,//加载数据内容高度 pageNum:1, //页数 pageCount:15, //条数 isPullupLoadData:false //是否继续请求 } mounted(){ var _self=this; _self.containerHeight=_...
    <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;
    							    }
    							    	}
    							    });
    				    		}
    			    		}

     

    展开全文
  • npm install vue-infinite-scroll --save 管官方也推荐了几种载入方式,但“最vue”的方式肯定是在main.js中加入: import infiniteScroll from 'vue-infinite-scroll' Vue.use(infiniteScroll) 实现范例 ...

    安装

    官网是:https://github.com/ElemeFE/vue-infinite-scroll
     

    npm install vue-infinite-scroll --save

     

    管官方也推荐了几种载入方式,但“最vue”的方式肯定是在main.js中加入:

    import infiniteScroll from 'vue-infinite-scroll'
    Vue.use(infiniteScroll)

    实现范例 

    官方给的代码范例是假设你在根组件写代码,实际上我们肯定是在子组件里写代码,所以代码也需要略作修改,下方只列有用的代码片段:

              <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
                <div v-for="item in data" :key="item.index">{{item.name}}</div>
              </div>
      data () {
        return {
          count: 0,
          data: [],
          busy: false
        }
      }
      methods: {
        loadMore: function() {
          this.busy = true
          setTimeout(() => {
            for (var i = 0, j = 10; i < j; i++) {
              this.data.push({name: this.count++ })
            }
            console.log(this.data)
            this.busy = false
          }, 1000)
        }
      }

     

    选项解释

    v-infinite-scroll="loadMore"表示回调函数是loadMore
    infinite-scroll-disabled="busy"表示由变量busy决定是否执行loadMorefalse则执行loadMoretrue则不执行,看清楚,busy表示繁忙,繁忙的时候是不执行的。
    infinite-scroll-distance="10"这里10决定了页面滚动到离页尾多少像素的时候触发回调函数,10是像素值。通常我们会在页尾做一个几十像素高的“正在加载中...”,这样的话,可以把这个div的高度设为infinite-scroll-distance的值即可。


    vue-infinite-scroll有时候会失效:
    |

     

    失效解决办法: 把v-if 换成v-show 

     

     

    展开全文
  • vue页面滚动分页加载数据

    千次阅读 2020-05-19 12:14:53
    //监听页面滚动事件 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实现页面滚动加载分页数据

    千次阅读 2021-01-26 11:41:32
    直接上代码: ...以下为js部分 ,请求后台数据需自己封装: export default{ //定义的数据变量 data(){ return { list:[], page:1,//当前页 limit:10 } }, methods:{ //获取后台接口数据

    直接上代码:

    以下为js部分 ,请求后台数据需自己封装:

            
    	export default{
            //定义的数据变量
            data(){
                return {
                    list:[],
                    page:1,//当前页
                    limit:10
                }
            },
    		methods:{
                //获取后台接口数据
                async getData(){
                    //请求数据
                    const data = {
                        page: this.page,
                        limit: this.limit,
                        type: "1"
                    }
                    // async:异步,await:需要等待await后面的函数运行完并且有了返回结果之后,才继续执行下面的代码
                    const res = await requset(`url`, data, 'get');//自己封装的请求数据的方法
                    this.list = res.data;
                },
                
                //滚动分页加载数据
                scroll() {
                    let isLoading = true;//是否有数据可以加载
                    window.onscroll = async () => {
                        // 距离底部200px时加载一次
                        let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 200;
                        if (bottomOfWindow && isLoading == true) {
                            this.page = this.page + 1;//每次分页+1
                            const data = {
                                page: this.page,
                                limit: this.limit,
                                type: "1"
                            }
                            const res = await requset(`url`, data, 'get');//自己封装的请求数据的方法
    						//有数据的时候加载
                            if(res.data.length > 0){
                                this.list.push(...res.data);//追加数据 使用 ...语法
                                isLoading = true;
                            }else{
                                this.$notify({
                                    title: '温馨提示:',
                                    message: '暂无更多数据信息!',
                                    position: 'bottom-right'
                                });
    							isLoading = false;//无数据可以加载
                            }
                        }
                    }
                }
            },
    		/*生命周期函数-加载完毕执行*/
            mounted(){  
                    this.getData();//初次加载
                    this.scroll();
    		}
    	}

     

    展开全文
  • HTML和滚动事件 ... LOCK_STATUS: false, //当在请求数据时,滚动时锁定不能再发送分页请求 datas: []//临时存储数据 } }, 加载数据请求:默认第一个,一页家在10条 async getApplyData(type) { thi.
  • 所以需要前端做个滚动加载的功能,并把数据做个拦截处理。效果如下图所示: 因为我的框架用得是:http://mint-ui.github.io/docs/#/zh-cn2/infinite-scroll html部分 <div class="progress_list" v-...
  • vue横屏分页加载 <template > <!-- 5.钢化膜 --> <div class="steelfilm"> <div class="steelfilm-top"> <div class="title"> <img src="@/assets/img/nl-member-privilege/...
  • Vue 无限滚动分页加载

    千次阅读 2018-10-28 19:50:09
    npm install vue-infinite-scroll --save 2. main.js中配置并使用 import infiniteScroll from 'vue-infinite-scroll'; Vue.use(infiniteScroll) 3. 用法 1.放在底部 &amp;lt;div v-infinite-scroll =...
  • 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; &...
  • 当将滚动条拉到低的时候,就会再加载31条数据,如果剩下的数据不足31,那就加载剩下的   根据项目需求,这需要一页可以看到全部数据,所以我选择了第二中方式 那么第二种方式要怎么去实现呢? 在了解它的原理前,你...
  • vue 中监测滚动加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListener('scroll', this.onScroll) }) }, 2: methods: { ...
  • vue web滚动分页

    2020-09-05 17:01:16
    vue web滚动分页 1.在你的帮助类里面新建一个slidePagination.js文件 2.将下面的代码复制进去 import Vue from 'vue' // 聚焦指令 // 注册一个全局自定义指令 `v-focus` // v-focus Vue.directive('focus', { /...
  • 创建完项目后,安装mock npm install mockjs 先在src目录下创建mock.js 在mock.js中输入: // 引入mockjs const Mock = require('mockjs') ...//可以打印option看下,需要先在vue页面中引用参能看到 //option为po
  • 滚动加载原理其实很简单,就是先判断当前是不是处在最底部,如果在最底部就可以继续加载添加数据。这里只是判断是否处在了底部,其他部分就根据自己的业务不同而代码不同。直接上代码吧。 这里先引入jquery,因为我...
  • 最近接了一个需求,是微信浏览器监听用户上拉操作,从而实现页面滚动加载的效果。其实网上已经有很多类似成熟的栗子了,但是由于自己开发经验有限,所以第一次看到这个需求的时候也是一百脸茫然,当时不知道网上有...
  • Vue】移动端h5前端分页加载,下拉加载更多
  • 本篇文章主要介绍了Vue滚动到页面底部无限加载数据的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装:npm install vue-infinite-loading –...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,148
精华内容 859
关键字:

vue滚动分页加载数据

vue 订阅