摸鱼神器：滚动条的无限滚动

2024-02-13 11:11:57

摸鱼的新发现，滚动条无限滚动

在一次调试的过程中，我按下了 F12 刚好是掘金的页面，然后把代码输入到控制台之后，顺手滚动了几下右侧的滚动条，发现个问题如下图所示：掘金官网的滚动条当你拖动到底部的时候会自动回弹到一定的位置。

顺着这个问题，我想着使用 vue-cli3.0 和 TS 实现一个滚动条无限滚动的效果，就是当我滚动到页面底部的时候会自动加载更多内容，无需手动点击加载更多按钮。

实现起来很简单，首先使用 Vue-cli3.0 创建一个新的项目，然后安装 vue-router 和 axios 作为依赖项。在 main.js 文件中配置路由，并创建一个名为 Home 的组件。在 Home 组件中，使用 axios 请求数据，并将数据绑定到 Vue 实例。

<template>
  <div id="app">
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="loadMore">加载更多</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      list: [],
      page: 1,
      isLoading: false
    }
  },
  methods: {
    loadMore() {
      this.isLoading = true
      axios.get('https://jsonplaceholder.typicode.com/users?_page=' + this.page)
        .then(response => {
          this.list = this.list.concat(response.data)
          this.page++
          this.isLoading = false
        })
    }
  },
  created() {
    this.loadMore()
  }
}
</script>