精华内容
下载资源
问答
  • 2021-01-30 13:27:59

    组件源码 .vue文件

    style="height:100%;overflow:auto"

    ref="filesTable"

    >

    ref="tableInner"

    class="tableInner"

    >

    export default {

    data() {

    return {};

    },

    mounted() {

    // 滚动加载更多

    const _this = this;

    const _filesTable = this.$refs.filesTable;

    const _offsetHeight = _filesTable.offsetHeight;

    _filesTable.addEventListener("scroll", () => {

    const _scrollTop = _filesTable.scrollTop;

    const _bodyHeight = _this.$refs.tableInner.clientHeight;

    if (_scrollTop + _offsetHeight >= _bodyHeight) {

    _this.$emit("dataScroll")

    }

    });

    },

    methods: {},

    components: {}

    };

    引用方式:

    内容

    Events

    @dataScroll

    type: function

    当页面滚动触底后触发事件

    ps :

    需要保证内容部分超出页面高度,即有可滚动的条件,可以触发滚动

    更多相关内容
  • 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();
    		}
    	}

     

    展开全文
  • 本篇文章主要介绍了Vue滚动到页面底部无限加载数据的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 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;
    							    }
    							    	}
    							    });
    				    		}
    			    		}

     

    展开全文
  • vue功能之“分页器的滚动加载

    千次阅读 2022-03-15 17:19:06
    1.安装 cnpm i vue-infinite-scroll --D 2.按需引入 import infiniteScroll from 'vue-infinite-scroll' 二、使用 1.样式 <div class="scroll-more" v-infinite-scroll="scrollMore" infinite-scroll-...

    一、依赖安装与引入

    1.安装 cnpm i vue-infinite-scroll --D

    2.按需引入 import infiniteScroll from 'vue-infinite-scroll'

    二、使用

    1.样式

    <div class="scroll-more"
                v-infinite-scroll="scrollMore"
                infinite-scroll-disabled="busy"
                infinite-scroll-distance="410"
                v-if="false"
              >
                <img src="/imgs/loading-svg/loading-spinning-bubbles.svg" alt="" v-show="loading">
              </div>

    2.代码

    export default{
        name:'order-list',//orderList订单详情
       
        directives: {
          infiniteScroll
        },
        data(){
         return{
             loading:true,//是否显示懒加载组件
           pageNum:1,//能够自动识别-显示几列-
           busy:false,//默认不触发滚动
          
         }
        },
        mounted(){
          this.getOrderList()
        },
     methods:{
          scrollMore(){
            this.busy = true
            setTimeout(()=>{
              this.pageNum++
              this.getList()
            },500)
          },
    
           getList(){//专门给scrollMore使用
           this.loading = true
            this.$axios.get('/orders',
            {
              params:{
                pageSize:10,//默认是10条
                pageNum:this.pageNum
              }
            }).then((res)=>{
              this.list = this.list.concat(res.list)//数组累加
               this.loading = false
    
              if(res.hasNextPage){//接口里面是否存在下一页
                this.busy = false
              }else{
                this.busy = true
              }
            })
          },
    
        }
    }

    展开全文
  • 当将滚动条拉到低的时候,就会再加载31条数据,如果剩下的数据不足31,那就加载剩下的   根据项目需求,这需要一页可以看到全部数据,所以我选择了第二中方式 那么第二种方式要怎么去实现呢? 在了解它的原理前,你...
  • HTMl: {{ item.graphicInformationTitle }} {{ item.graphicInformationDetailContent }} {{ item.createDate }} 图文分享 暂无数据 CSS: .guest-info-wrap { padding: 0 .4rem; padding-bottom: .95rem; ...
  • html: <div class="integral-record-cont"> <div class="integral-record-item" v-for="(item,index) in integralList" :key="index" v-if="integralList.length>0">
  • 如果需要分页获取数据,则新增一个显示数据,将滚动后的下一页数据,push 至显示数据内 实现方法: 分页器:基于 elementUI , 点击上一页 / 下一页的时候, 请求 page 变化, 获取不同分页数据 无线滚动:基于 ...
  • vue实现滚动加载

    千次阅读 2022-01-17 17:03:24
    vue实现滚动加载
  • 本文实例讲述了vue实现的上拉加载更多数据/分页功能。分享给大家供大家参考,具体如下: 加载状态 上拉加载 show-loading=false background-color=#fbf9fe> 正在加载 show-loading=true> ...
  • vue滑动分页加载数据

    2022-01-26 09:56:54
    vue滑动分页加载数据 data() { return { date: "", week: "", list: null, loading: false, total: 0, hasMore: true, listQuery: { page: 1, size: 10 }, }; }, beforeDe
  • npm install vue-infinite-scroll --save 管官方也推荐了几种载入方式,但“最vue”的方式肯定是在main.js中加入: import infiniteScroll from 'vue-infinite-scroll' Vue.use(infiniteScroll) 实现范例 ...
  • vue select 分页加载数据(懒加载)

    千次阅读 2021-08-18 14:22:13
    本文就是解决这个问题,实现下拉框分页加载。 在 el-selec 上 加 v-el-select-loadmore 指令(在下面定义) <template> <el-form :inline="true" size="small"> <el-form-item label="小区"> &...
  • 由于图片数量较大,一次全把数据请求出来加载很慢,所以就需要加滚动条请求数据
  • vue页面滚动分页加载数据

    千次阅读 2020-05-19 12:14:53
    //监听页面滚动事件 window.addEventListener("scroll", this.handleScroll); } //methods里面的方法 handleScroll() { //窗口滚要做的操作写这里 let sh = document.documentElement.scrollHeight || ...
  • 纯前端表格滚动分页加载实现效果实现过程 实现效果 实现过程 <div style="width: 100%; overflow: hidden; position: relative" id="container" ref="container" @mousewheel="handleScroll" :style="{ ...
  • Vue向下滚动加载更多数据-scroll-案例

    千次阅读 多人点赞 2021-08-08 14:42:40
    vue-infinite-scroll 安装 npm install vue-infinite-scroll --save 尽管官方也推荐了几种载入方式,但“最vue”的方式肯定是在main.js中加入 import infiniteScroll from 'vue-infinite-scroll' Vue.use...
  • 所以需要前端做个滚动加载的功能,并把数据做个拦截处理。效果如下图所示: 因为我的框架用得是:http://mint-ui.github.io/docs/#/zh-cn2/infinite-scroll html部分 <div class="progress_list" v-...
  • 图片出现在视口区域时,进行图片加载 1、节省带宽 2、提高页面加载速度
  • Vue监听滚动加载

    2021-08-01 23:01:21
    在PC端,请求数据过多一般采用分页处理,在移动端,则一般使用滚动加载,通过监听元素滚动触底触发加载事件。 用法 // template <div class="box" @scroll="onScroll"> <div class="box2"></div>...
  • 在使用vue实现聊天页面的时候,聊天数据动态加到页面中,需要实现滚动条也自动滚动到底部。这时我找到网上有个插件 vue-chat-scroll https://www.npmjs.com/package/vue-chat-scroll 但是安装后发现是用不了的,报错...
  • vue pc端列表滚动加载数据的方法 简单来说需要需要鼠标滚动到容器的底部的距离 data{ pageSize: 10,
  • 安装-官网 npm install vue-infinite-loading -S or <script src="https://unpkg.com/vue-infinite-loading@^2/dist/vue-...// 滚动加载数据 import InfiniteLoading from 'vue-infinite-loading'; Vue.us..
  • vue横屏分页加载 <template > <!-- 5.钢化膜 --> <div class="steelfilm"> <div class="steelfilm-top"> <div class="title"> <img src="@/assets/img/nl-member-privilege/...
  • 需要借助vant的PullRefresh实现:... <template> <div class="refresh-jobs"> <div class="main" v-show="boutiqueList &... boutiqueList.length >...div class="refresh_main"&g...
  • <template> <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> </template> <script> export default { data () { return { ... key:.
  • HTML和滚动事件 data数据 data() { return { current: 1,//当前页数 applyData: [],//数据存放 pages: 0,//一共多少页数 ...加载数据请求:默认第一个,一页家在10条 async getApplyData(type) { thi.
  • 最近接到一个需求,pc端中的table 数据不做分页,而是做成滚动条形式,但是...1、首先要确定 加载数据的时机是:table中的滚动条滑动到底部的时候 scrollEvent(event) { /** * 需要判断滚动条是否到达table底部,到
  • vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装:npm install vue-infinite-loading –...

空空如也

空空如也

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

vue分页滚动加载数据

友情链接: jaimun_v64.zip