精华内容
下载资源
问答
  • Vue 无限滚动分页加载
    万次阅读
    2018-10-28 19:50:09

    1. 安装

    npm install vue-infinite-scroll --save
    

    2. main.js中配置并使用

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

    3. 用法

    1.放在底部

    <div v-infinite-scroll ="loadMore" infinite-scroll-disabled ="busy" infinite-scroll-distance="5">
        <img src="static/img/loading.gif" alt="">
    </div>
    

    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);
        }
      }
    })
    
        
    

    4.可参考网址

    https://www.npmjs.com/package/vue-infinite-scroll

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

    展开全文
  • Vue实现页面滚动加载分页数据

    千次阅读 2021-01-26 11:41:32
    }, //滚动分页加载数据 scroll(person) { let isLoading = true;//是否有数据可以加载 window.onscroll = async () => { // 距离底部200px时加载一次 let bottomOfWindow = document.documentElement.offsetHeight ...

    直接上代码:

    以下为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页面滚动分页加载数据

    千次阅读 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() { }
            }
    
    

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

    展开全文
  • 如果已经获取到了全部数据,就需要新增一个显示数据,初次加载一部分,滚动后将截取的下一部分 push 到显示数据中 如果需要分页获取数据,则新增一个显示数据,将滚动后的下一页数据,push 至显示数据内 实现方法...
  • npm install vue-infinite-scroll --save 管官方也推荐了几种载入方式,但“最vue”的方式肯定是在main.js中加入: import infiniteScroll from 'vue-infinite-scroll' Vue.use(infiniteScroll) 实现范例 ...
  • 本篇文章主要介绍了Vue滚动到页面底部无限加载数据的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 组件源码 .vue文件style="height:100%;overflow:auto"ref="filesTable">ref="tableInner"class="tableInner">...},mounted() {// 滚动加载更多const _this = this;const _filesTable = thi...
  • 主要介绍了vue实现的上拉加载更多数据/分页功能,涉及基于vue的事件响应、数据交互等相关操作技巧,需要的朋友可以参考下
  • 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
  • vue实现滚动加载

    千次阅读 2022-01-17 17:03:24
    1.实现某个div的滚动加载 1.html <div ref="box"></div> 2.js data () { return { timeList: [], // 分页 page: 1, // 当前页 page_size: 10, // 每页总条数 page_count: 1, // 总页数 } }, ...
  • vue滚动分页加载数据

    2019-03-05 16:50:37
    var vm = new Vue({ el:"#app", data:{ containerHeight:0, //获取容器高度 contentHeight:0,//加载数据内容高度 pageNum:1, //页数 pageCount:15, //条数 isPullupLoadData:...
  • Vue监听滚动加载

    2021-08-01 23:01:21
    在PC端,请求数据过多一般采用分页处理,在移动端,则一般使用滚动加载,通过监听元素滚动触底触发加载事件。 用法 // template <div class="box" @scroll="onScroll"> <div class="box2"></div>...
  • 本文就是解决这个问题,实现下拉框分页加载。 在 el-selec 上 加 v-el-select-loadmore 指令(在下面定义) <template> <el-form :inline="true" size="small"> <el-form-item label="小区"> &...
  • 一个集成了下拉刷新上拉加载无限滚动加载Vue组件
  • 当将滚动条拉到低的时候,就会再加载31条数据,如果剩下的数据不足31,那就加载剩下的   根据项目需求,这需要一页可以看到全部数据,所以我选择了第二中方式 那么第二种方式要怎么去实现呢? 在了解它的原理前,你...
  • 安装-官网 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移动端下拉加载下一页数据的组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • .scrollHeight // 滚动条高度 let st = this.$refs['myScrollbar'].scrollTop // 滚动条距离顶部的距离 let ch = this.$refs['myScrollbar'].clientHeight // 滚动条外容器的高度 if (st + ch >= sh) { //到底了-...
  • 纯前端表格滚动分页加载实现效果实现过程 实现效果 实现过程 <div style="width: 100%; overflow: hidden; position: relative" id="container" ref="container" @mousewheel="handleScroll" :style="{ ...
  • 所以需要前端做个滚动加载的功能,并把数据做个拦截处理。效果如下图所示: 因为我的框架用得是:http://mint-ui.github.io/docs/#/zh-cn2/infinite-scroll html部分 <div class="progress_list" v-...
  • vue实现滚动加载指令

    2021-04-15 15:50:46
    因项目中需实现滚动分页,但是使用v-infinite-scroll渲染时会触发,所以自己实现滚动加载指令来替代 前提条件: jquery.js:使用了jquery计算元素高度,可自行替代为原生JavaScript lodash.js:使用lodash处理滚动...
  • Date.now() if (nowTime - preTime >= delay) { preTime = nowTime fn.apply(context, args) } } } constant.js 滚动加载到达底部的偏移量 // 滚动加载到达底部的偏移量 export const REACH_BOTTOM_DISTANCE = ...
  • 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...
  • vue pc端列表滚动加载数据的方法 简单来说需要需要鼠标滚动到容器的底部的距离 data{ pageSize: 10,
  • vue 下拉加载分页

    2020-08-18 16:37:52
    varend = 1; //初始化执行函数 created(){ window.addEventListener('scroll', that.... //可滚动容器的高度 let innerHeight = document.querySelector('#app').clientHeight; //屏幕尺寸高度 // ...
  • 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', { /...
  • pc端vue 滚动到底部翻页 效果,具体内容如下所示: html: (item,index) key=index click=getDeviceInfo(item.id)> <span class=state :class={'state1':item.status==1,'state0':item.status==0,'state2':...
  • 1.局部引用安装的vant 的list在当前有滚动加载更多引如import Vue from 'vue'import { List } from 'vant'import 'vant/lib/index.css'Vue.use(List);2.在data变量中定义data() {return {offset:0,//滚动条与底部...

空空如也

空空如也

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

vue分页滚动加载