直观展现！撸起袖子实现Vue移动UI框架之滑动加载更多组件

2023-12-24 23:30:10

移动端开发中，滑动加载更多组件是一个非常实用的功能。它允许用户在页面底部滚动时自动加载更多内容。这样，用户就不必点击“加载更多”按钮或等待页面重新加载。

滑动加载组件的实现并不复杂。下面，我们将从零开始，一步一步地创建一个Vue滑动加载更多组件。

1. 创建Vue项目

首先，创建一个新的Vue项目。可以使用Vue CLI命令行工具或Vue Webpack模板。

vue create vue-mobile-ui
cd vue-mobile-ui

2. 安装必要的依赖项

接下来，我们需要安装必要的依赖项。其中包括Vuex状态管理库和axios HTTP库。

npm install vuex axios

3. 创建Vuex存储

接下来，我们需要创建一个Vuex存储来管理组件的状态。

在src目录下创建一个名为store的文件夹，并在其中创建一个index.js文件。在该文件中，定义Vuex存储的模块。

// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    loading: false,
    hasMore: true,
    items: []
  },
  mutations: {
    setLoading(state, loading) {
      state.loading = loading
    },
    setHasMore(state, hasMore) {
      state.hasMore = hasMore
    },
    setMore(state, data) {
      state.items = [...state.items, ...data]
    }
  },
  actions: {
    loadMore({ commit }) {
      commit('setLoading', true)
      axios.get('/api/items')
        .then(res => {
          commit('setMore', res.data.items)
          commit('setLoading', false)
          if (res.data.items.length === 0) {
            commit('setHasMore', false)
          }
        })
        .catch(err => {
          commit('setLoading', false)
          console.error(err)
        })
    }
  }
})

4. 创建滑动加载组件

接下来，我们需要创建一个滑动加载组件。

在src/components目录下创建一个名为LoadMore.vue的文件。在该文件中，定义组件的模板和逻辑。

<!-- src/components/LoadMore.vue -->

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <div v-if="loading" class="loading">加载中...</div>
    <button v-if="hasMore" @click="loadMore">加载更多</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'LoadMore',
  computed: {
    ...mapState(['loading', 'hasMore', 'items'])
  },
  methods: {
    ...mapActions(['loadMore'])
  }
}
</script>

<style>
.loading {
  text-align: center;
  padding: 10px 0;
}
</style>

5. 在App.vue中使用组件

最后，我们需要在App.vue文件中使用该组件。

<!-- src/App.vue -->

<template>
  <div>
    <LoadMore />
  </div>
</template>

<script>
import LoadMore from './components/LoadMore.vue'

export default {
  name: 'App',
  components: {
    LoadMore
  }
}
</script>