Vue.js神奇应用：无限滚动轻松实现

Vue.js这JS框架太赞了，让做网页app的过程变得超容易！它能把网页应用变成组件化模式，再也不用面对烦人的无限滚动和瀑布流布局问题。今天我来给大家讲讲怎么借助Vue.js和一些有用的第三方库做出这些神奇效果。

实现无限滚动

无限浏览就是说，不管你怎么往下拉网页，总能发现新东西，就像手机里那种好几百页的App。这个功能特别适合看大篇幅内容，保证你看得过瘾。

数据源准备

首先，咱们需要弄个适合自己的数据库，里头当然要有些内容啦；就像有时候你看网页时，那个会自动滑动的滚动条上就能显示出好多条消息，咱们就可以借鉴这种设计来构建自己的数据库咯~

javascript
const dataSource =[
  { id:1, name:'Item 1'},
  { id:2, name:'Item 2'},
  //更多数据项...
];

[
  {id: 1, text: 'Item 1'},
  {id: 2, text: 'Item 2'},
  // ... more data
  {id: 99, text: 'Item 99'},
  {id: 100, text: 'Item 100'},
]

安装并使用 vue-infinite-scroll 库

接下来我们要用个叫vue-infinite-scroll的神奇工具，这就能实现无限翻页！怎么用？很简单，只要用npm命令装一下就好~

bash
装vue-infinite-scroll的时候，别忘了加个"--save"！
npm install vue-infinite-scroll
然后，在组件中全局注册所需指令：

我们来加载个InfiniteScroll组件。

Vue.use(InfiniteScroll);
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
在组件中设置配置和数据：

export default {
  

    

      
{{ item.text }}
    
    

      Loading ...
    
  


export default {
  data () {
    return {
      items: [], // 当前列表所有数据
      busy: false, // 标记是否正在请求数据
      page: 1, // 当前数据分页
      perPage: 10, // 每页数量
      total: 100, // 总数据量
    }
  },
  methods: {
    loadMore() {
      // 标记正在加载数据
      this.busy = true
      // 模拟请求延迟
      setTimeout(() => {
        // 构造新数据
        const newItems = []
        const from = (this.page - 1) * this.perPage + 1
        const to = this.page * this.perPage
        for (let i = from; i <= to && i <= this.total; i++) {
          newItems.push({
            id: i,
            text: 'Item ' + i
          })
        }
        // 加载新数据
        this.items = [...this.items, ...newItems]
        // 增加当前页数
        this.page++
        // 去除加载数据标记
        this.busy = false
      }, 1000)
    }
  }
}

  data(){

    return {

      items: dataSource,

      page:1,

      pageSize: 10,

    };

  },

};
npm install vue-waterfall
实现瀑布流布局

瀑布流布局就是咱们常见的那类布局，各种东西随处乱放，最后自己找到位置。想要搞定它？快来试试vue-waterfall这个神奇小帮手！

安装并使用 vue-waterfall 库
import waterfall from 'vue-waterfall'
Vue.use(waterfall)
首先安装 vue-waterfall 组件库：

别着急！你只需要装上那个叫做vue-waterfall的npm插件，然后把它加进你的依赖项里头就搞定！

然后在组件中全局注册组件：
  
    

      
{{item.title}}
      
{{item.desc}}
      
    
  


import axios from 'axios'
export default {
  data () {
    return {
      items: []
    }
  },
  created () {
    axios.get('https://api.example.com/items').then(response => {
      this.items = response.data
    })
  }
}

咱们就用下'vue-waterfall'这个插件。

  components:{

    waterfall,
[
  {
    title: 'Item 1',
    desc: 'This is item 1',
    imgUrl: 'https://example.com/item1.png',
  },
  {
    title: 'Item 2',
    desc: 'This is item 2',
    imgUrl: 'https://example.com/item2.png',
  },
  // ...
]
在组件中使用瀑布流布局：

html
我们用 Axios 库来取数据，然后显示在瀑布流里。
对无限滚动和瀑布流布局进行优化
大数据操作太慢，怎么让无限滚动跟瀑布流布局快些？咱们得想办法提速才行！
使用虚拟滚动技术
所谓的虚拟滚动，就是把视觉可见的那部分画出来，不用全盘搞定所有元素。用这个方法不仅方便，还让手机更快运行！比如说那个叫vue-virtual-scroll-list的神器，你没用过吗？那可是我们公认的虚拟滚动好帮手。
安装 vue-virtual-scroll-list 库
安装 vue-virtual-scroll-list 库：
装上vue虚拟滚动列表，记得保存！
在组件中修改以使用虚拟滚动效果：
npm install vue-virtual-scroll-list

来试试VirtualList，这货让你轻松搞定永不停顿的虚拟列表！
    VirtualList,
将原有瀑布流组件替换为虚拟滚动列表组件来实现虚拟滚动效果。
分段加载数据
  
    

      
{{item.title}}
      
{{item.desc}}
      
    
  


import axios from 'axios'
import VirtualScrollList from 'vue-virtual-scroll-list'
export default {
  components: { VirtualScrollList },
  data () {
    return {
      items: []
    }
  },
  created () {
    axios.get('https://api.example.com/items').then(response => {
      this.items = response.data
    })
  }
}


别傻乎乎的全填满组件里的数据，要根据你实际需要来！
loadMore(){
给你分享个简单的方法算一下本页有几个项目要展示（就是看一眼页面上有几行文字，然后用这数字减1，得出的结果再乘以这个数）。好了，现在从这写到最后那行都画上重点！
接着，把下面那页的数据也移过来呗，就这么简单地把两页合在一起唠！
  this.page++;
},
我们先看看前面的数据刷完了别忘了往下拉，还可以接着刷新。安心，不会让你卡住哒！
让我告诉你如何使用Vue.js搞无限滑动和瀑布流效果。首先你得认识一下vue-infinite-scroll、vue-waterfall还有vue-virtual-scroll-list这些玩意儿。然后挑选适合自己实际需求的那一个来用就行了。虽然说，学多点儿知识总会有用滴，做出来的效果可能会更好！
  

    

      
{{ item.text }}
    
    

      Loading ...
    
  


export default {
  data () {
    return {
      items: [], // 当前列表所有数据
      busy: false, // 标记是否正在请求数据
      page: 1, // 当前数据分页
      perPage: 10, // 每页数量
      total: 100, // 总数据量
    }
  },
  methods: {
    loadMore() {
      // 标记正在加载数据
      this.busy = true
      // 模拟请求延迟
      setTimeout(() => {
        // 构造新数据
        const newItems = []
        const from = (this.page - 1) * this.perPage + 1
        const to = this.page * this.perPage
        for (let i = from; i <= to && i <= this.total; i++) {
          newItems.push({
            id: i,
            text: 'Item ' + i
          })
        }
        // 加载新数据
        if (this.page <= 10) {
          this.items = [...this.items, ...newItems]
          // 增加当前页数
          this.page++
        } else {
          this.busy = true
        }
        // 去除加载数据标记
        this.busy = false
      }, 1000)
    }
  }
}

。
			    						    						    						    					    		
			    					    				    					    			
 原文链接：https://www.icz.com/technicalinformation/web/2024/04/14114.html，转载请注明出处~~~