精华内容
下载资源
问答
  • 此处先拿demo中的几个变量出来声明 contentNum 可视区域的dom数量 fixedHeight dom固定的高度 domNum dom总数量 第一种情况,知道滚动内容区dom的总数量,那我可以计算出平均一个点的dom高度fixedHeight,即 ...

    我们知道,如果页面上dom数量过多,势必会影响html页面性能,尤其在无限上拉情景下,随着页面节点的加载,html页面的dom树暴增,那有没有好的方案呢?

    目前我的实现方案是基于 https://juejin.im/entry/5819993fbf22ec0068aab054 此方案下进行的探索和思考。

    这是我个人写的  demo

    demo的tab页是按照场景进行命名的,从左到右,分别对应了不同场景。

    细节的话,可以通过控制台去看demo的源码,基本上每行都有注释

    网上说的较多的都是懒加载,然后dom节点高度固定的情况下的实现。

    如果是dom高度不固定的情况下,有没有一个合适的方案呢?

    此处先拿demo中的几个变量出来声明

    contentNum  可视区域的dom数量

    fixedHeight  dom固定的高度

    domNum  dom总数量

    第一种情况,知道滚动内容区dom的总数量,那我可以计算出平均一个点的dom高度fixedHeight,即 fixedHeight = domNum的总高度 / domNum ;则转化为了demo中tab的第一种方案,简而言之,需要求出一个平均高度来 变相知道 dom的固定高度。

    第二种情况,分页加载dom高度不固定的情况,这个时候我的思路是和第一种情况是一样的,也得求出一个平均高度,问题平均高度fixedHeight 如何来?所以我初始化的时候加载了大概60(可根据实际情况调整)个节点的数据,根据这些节点算出平均高度后再删掉这些数据。这样fixedHeight  出来了,情况也就转化为了上述第一种情况了。

    注意事项

    因为dom高度不固定,所以存在极大极小值的情况,上述方案可能会有瑕疵,但是应对合理日常的UI,我觉得上述方案是没问题的。

     

     

    展开全文
  • vue dom滚动监听 守门员 (vue-recyclist) Infinite scroll list for Vue.... 带有DOM回收的Vue.js(v2.1 +)的无限滚动列表。 View demo 查看演示 Download Source 下载源 安装 (Installation) npm install -D vu...

    vue dom滚动监听

    守门员 (vue-recyclist)

    Infinite scroll list for Vue.js (v2.1+) with DOM recycling.

    带有DOM回收的Vue.js(v2.1 +)的无限滚动列表。

    安装 (Installation)

    npm install -D vue-recyclist

    进口 (Import)

    import VueRecyclist from 'vue-recyclist'
    
    export default {
      ...
      components: {
        VueRecyclist,
      },
      ...
    }

    or

    要么

    <script src="/path/to/vue-recyclist/dist/vue-recyclist.js"></script>

    用法 (Usage)

    <template>
      <div>
        ...
        <vue-recyclist
          :list = "list"
          :tombstone = "tombstone"
          :size = "size"
          :offset = "offset"
          :loadmore = "loadmore"
          :spinner = "spinner"
          :nomore = "nomore">
          <!-- tombstone slot -->
          <template slot="tombstone" scope="props">
            ...
          </template>
          <!-- item slot -->
          <template slot="item" scope="props">
            ...
          </template>
          <!-- loading spinner -->
          <div slot="spinner">Loading...</div>
          <!-- end of list -->
          <div slot="nomore">No More Data</div>
        </vue-recyclist>
        ...
      </div>
    </template>
    
    <script>
    import VueRecyclist from 'vue-recyclist'
    export default {
      data() {
        ...
      },
      components: {
        'vue-recyclist': VueRecyclist
      },
      methods: {
        loadmore() {
          // Fetch more items
          ...
        }
      }
    }
    </script>

    选件 (Options)

    DirectiveTypeDefault
    listArrayrequiredList of items
    tombstoneBooleanfalseWhether to show tombstones
    sizeNumber10The number of items added each time
    offsetNumber200The number of pixels of additional length to allow scrolling to
    loadmoreFunctionrequiredThe function of loading more items
    spinnerBooleantrueWhether to show loading spinner
    nomoreBooleanfalseWhether to show 'no more data' status bar
    指示 类型 默认
    清单 数组 需要 项目清单
    墓碑 布尔型 是否展示墓碑
    尺寸 10 每次添加的项目数
    抵消 200 允许滚动到的其他长度的像素数
    装载更多 功能 需要 装载更多物品的功能
    微调器 布尔型 真正 是否显示加载微调器
    不再 布尔型 是否显示“没有更多数据”状态栏

    发展历程 (Development)

    # install dependencies
    npm install
    
    # serve with hot reload at localhost:8080
    npm run dev
    
    # build for production with minification
    npm run build

    翻译自: https://vuejsexamples.com/infinite-scroll-list-for-vue-js-with-dom-recycling/

    vue dom滚动监听

    展开全文
  • 主要介绍了Vue 无限滚动加载指令的实现代码,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • vue无限滚动实现

    2021-06-19 15:57:39
    vue无限滚动实现 1.首先挂载一个监听滚动条滚动的方法 mounted () { // 添加滚动条滚动的监听事件 window.addEventListener('scroll', this.scroll, false) }, beforeDestroy () { // 删除滚动条滚动的监听...

    vue无限滚动实现

    1.首先挂载一个监听滚动条滚动的方法

      mounted () {
        // 添加滚动条滚动的监听事件
        window.addEventListener('scroll', this.scroll, false)
      },
      beforeDestroy () {
        // 删除滚动条滚动的监听事件
        window.removeEventListener('scroll', this.scroll, false)
      }
    

    2.我们在方法区里编写一个监听滚动条滚动的方法

    在滚动方法中我们计算滚动条到底部的距离,当距离小于100px时就调用getHotProduct 获取数据

    methods: {
       // 获取热销商品
       getHotProduct () {
         // 当前是否正在加载,如果是正在加载就取消加载数据
         if (this.loading) {
           this.page--
           return
         }
         if (this.productList.length >= this.totalCount) return
         // 赋值表示正在加载
         this.loading = true
         getHots({
           limit: this.limit,
           page: this.page
         }).then(({ data }) => {
           if (data.code === 0) {
             this.totalCount = data.page.totalCount
             this.totalPage = data.page.totalPage
             this.productList = this.productList.concat(data.page.list)
           }
           // 表示加载完成
           this.loading = false
         }).catch((res) => {
           console.log(res)
         })
       },
       scroll () {
         window.onscroll = () => {
           // 整个页面的高度
           const scrollHeight = document.body.scrollHeight
           // 当前可视区的顶部到页面顶部的高度,||是做兼容处理的
           const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
           // 当前可视区的高度
           const clientHeight = document.documentElement.clientHeight
           // 可视区底部到页面底部的高度,即滚动条与底部的距离
           const instance = scrollHeight - scrollTop - clientHeight
           // 当滚动条与底部的距离小于100时就触发加载数据
           if (instance < 100) {
             this.page++
             this.getHotProduct()
           }
         }
       }
     }
    

    在这里附上一张图,让你更容易理解页面是如何触发方法获取数据的:
    在这里插入图片描述

    展开全文
  • 主要介绍了Vue.js 无限滚动列表性能优化方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue无限滚动

    2020-08-21 10:06:41
    npm install vue-infinite-scroll --save 2、引入插件,在main.js中引入 import infiniteScroll from 'vue-infinite-scroll' Vue.use(infiniteScroll) 3、使用插件 <div v-infinite-scroll="loadMore" ...

    1、安装插件

    npm install vue-infinite-scroll --save
    

    2、引入插件,在main.js中引入

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

    3、使用插件

     <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 {
          end: false,
          msgList : [],
          busy: false,
          rows: 10,
          page: 1
        }
      }
    
    methods: {
        loadMore: function() {
          this.busy = true
          if(this.end == false) { //end是我用来判断后端是否有数据传回来的标志
            this.getMsg(this.rows, this.page)//此处放你后端获取msgList 数据的函数
          }     
        }getMsg(rows, page) {
          const params = {
            rows:this.rows,
            page:this.page
          }
          this.$api.getMsg(params) //此接口是你们获取后端数据的接口
            .then((res) => {
            // 判断后端数据是否为空,是空的话就把end设置为true,这样就不会再向后端获取数据了
              if(!res.data.records[0]){
                this.end = true
              } else {
                // 不为空的话就把获取到的数据与之前的数据拼接,同时页数page自加,这样下次调用此函数就是获取下一页的是数据
                this.msgList = this.msgList.concat(res.data.records)
                this.page++
              }
              this.busy = false//代码回调成功需要加入此代码,表示让他接着执行loadMore代码
            })
            .catch((err) => {
              console.log(err)
            })
        },
      }
      //busy代表是否执行loadMore函数。只要busy为false就要执行loadMore函数,busy为true就不执行函数
    

    4、选项解释

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

    https://www.jianshu.com/p/c4abab8c1ba6

    5、注意事项

    如果出现不断加载的情况,要考虑是使用时位置写错导致的(好像是因为什么没办法充满容器)
    如果是配合elementui的el-tabs一起使用的话
    在这里插入图片描述
    1、要这样写,不能把无限滚动写在单独一个el-tab-pane里

    展开全文
  • 无限滚动下拉 Vue + Vuetify的无限滚动下拉列表 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
  • Vue 无限滚动组件

    千次阅读 2018-12-11 07:19:53
    infinite-scroll 前因 前段儿时间,公司内部做了个项目,原本的数据展示方式是table + pagination。...由于项目用的前端框架是Vue,所以就写了一个基于vue简单的滚动加载组件:CmInfiniteScroll 使用方法 只...
  • Vue 无限滚动插件

    2020-04-09 13:25:02
    插件 vue-infinite-loading 安装 npm install vue-infinite-loading -S 使用案例 <template> <div class="card-body"> <h5>评论</h5> <br> <ul class=...
  • vue 无限滚动加载指令

    千次阅读 2021-04-07 16:38:02
    Vue.directive('scroll', { // 当被绑定的元素插入到 DOM 中时…… bind: function(el, binding, vnode) { el.style.overflow = 'auto' let distance = 10; let _this = this; let busy = el.getAttribute(...
  • 项目中需要列表无线滚动操作,找到这个插件vue-seamless-scroll 记录使用方法: // **main.js** // 1.全局 install import Vue from 'vue' import scroll from 'vue-seamless-scroll' Vue.use(scroll) // 或者你...
  • vue组件的封装 <template> <div class="infinite-list-wrapper" ref="scrollView" style=""> <ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled" > <!-- ...
  • Vue 无限滚动加载指令

    2019-04-26 16:40:00
    也不存在什么加载咯, 就是一个判断滚动条是否到达浏览器底部了。 如果到了就触发事件,米到就不处理。 计算公式提简单的 底部等于(0) = 滚动条高度 - 滚动条顶部距离 - 可视高度。 反正结果就是0。 一、获取...
  • gitHub官网:...npm install vue-infinite-scroll --save 使用:main.js中引入 import infiniteScroll from 'vue-infinite-scroll' Vue.use(infiniteScroll) 使用案例: <di...
  • vue无限滚动插件使用记录

    千次阅读 2018-09-28 21:27:14
    今天在看前同事做的项目时,了解到一款可以实现无限加载的vue插件vue-infinite-loading 具体实现后的效果就是,当你在下拉一个菜单时,当下拉一定数量时,有一个加载等待的效果,然后再继续显示。并且利用插槽slot...
  • 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实现组件无限滚动If you’ve ever caught yourself on social media for way too long, chances are the site you were on was using an infinite scrolling component. 如果您在社交媒体上陷入困境的时间过长,...
  • 安装vue-seamless-scroll插件 安装 yarn add vue-seamless-scroll --save 或者 npm install vue-seamless-scroll --save 在main.js文件中引入 import scroll from 'vue-seamless-scroll' Vue.use(scroll) ...
  • Vue无限滚动(vue-infinite-scroll)1.安装插件 1.npm i vue-infinite-scroll –save:安装vue-infinite-scroll插件并且会将包的名称及版本号放在dependencies里面 2.D就是–save-dev 这样安装的包的名称及版本号...
  •  /* 滚动条滑块 */  &::-webkit-scrollbar-thumb {  border-radius: 4px;  background: #cecece !important;  } }      :class="['scroll-box',isShowScrollbar&&'...

空空如也

空空如也

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

vue无限滚动列表

vue 订阅