Vue 多标签选项卡上拉加载更多实现示例 - 完整代码解析

以下是一个使用 Vue 实现多 Tab 选项卡上拉加载更多的实践例子：\n\nHTML 模板：\n\nhtml\n<div id="app">\n <div class="tabs">\n <div class="tab" v-for="(tab, index) in tabs" :key="index" @click="selectTab(index)" :class="{ active: activeTab === index }">\n {{ tab.name }}\n </div>\n </div>\n <div class="content">\n <div class="tab-content" v-for="(content, index) in contents" :key="index" v-show="activeTab === index">\n <div class="item" v-for="item in content.items" :key="item.id">\n {{ item.text }}\n </div>\n <div v-if="!content.loading && content.hasMore">\n <button @click="loadMoreContent(index)">加载更多</button>\n </div>\n <div v-if="content.loading">加载中...</div>\n <div v-if="!content.hasMore && content.items.length === 0">暂无数据</div>\n </div>\n </div>\n</div>\n\n\nVue 实例代码：\n\njavascript\nnew Vue({\n el: "#app",\n data: {\n tabs: [\n { name: "Tab 1" },\n { name: "Tab 2" },\n { name: "Tab 3" }\n ],\n activeTab: 0,\n contents: [\n {\n items: [],\n loading: false,\n hasMore: true,\n page: 1\n },\n {\n items: [],\n loading: false,\n hasMore: true,\n page: 1\n },\n {\n items: [],\n loading: false,\n hasMore: true,\n page: 1\n }\n ]\n },\n methods: {\n selectTab(index) {\n this.activeTab = index;\n },\n loadMoreContent(tabIndex) {\n const content = this.contents[tabIndex];\n content.loading = true;\n \n // 模拟异步请求数据\n setTimeout(() => {\n const newItems = this.generateItems(content.page);\n content.items = content.items.concat(newItems);\n content.page++;\n content.loading = false;\n content.hasMore = newItems.length === 10; // 假设每页加载10条数据\n }, 1000);\n },\n generateItems(page) {\n const items = [];\n for (let i = 1; i <= 10; i++) {\n const id = (page - 1) * 10 + i;\n items.push({\n id: id,\n text: `Item ${id}`\n });\n }\n return items;\n }\n }\n});\n\n\nCSS 样式：\n\ncss\n.tabs {\n display: flex;\n}\n\n.tab {\n padding: 10px;\n cursor: pointer;\n}\n\n.tab.active {\n font-weight: bold;\n}\n\n.content {\n margin-top: 10px;\n}\n\n.item {\n padding: 10px;\n border: 1px solid #ccc;\n margin-bottom: 10px;\n}\n\n\n在例子中，使用tabs数组来定义选项卡的名称，使用activeTab变量来表示当前选中的选项卡索引。使用contents数组来保存每个选项卡对应的内容，包括内容项数组items、是否正在加载loading、是否还有更多数据hasMore和当前加载的页数page。\n\n在selectTab方法中，切换选项卡时更新activeTab的值。\n\n在loadMoreContent方法中，根据当前选项卡的索引获取对应的内容对象，设置loading为true表示正在加载数据，然后使用setTimeout模拟异步请求数据的过程。在请求完成后，将新加载的数据拼接到items数组中，更新page的值和loading的状态，并根据是否有新加载的数据来更新hasMore的值。\n\n使用generateItems方法来生成模拟的数据，根据当前页数和每页的数据量生成对应的数据项。\n\n在HTML模板中，使用v-for指令渲染选项卡和内容项，使用v-show指令根据activeTab的值来显示当前选中的选项卡对应的内容。加载更多按钮根据当前内容项的loading和hasMore状态显示不同的内容。\n\n以上就是一个使用 Vue 实现多 Tab 选项卡上拉加载更多的实践例子，希望能对你有所帮助！