v-loading使用方法

时间: 2023-10-24 15:04:16 浏览: 90

vue-infinite-loading2.0 中文文档详解

Vue-Infinite-Loading 2.0 中文文档详解 Vue-Infinite-Loading 2.0 是一个使用在 Vue.js 中的无限滚动插件，它可以帮助开发者快速创建一个无限滚动列表。该插件具有移动端支持友好、兼容任何一个可以滚动的元素、有不同的旋转器可以作为加载动画、支持加载后显示结果、支持两个方向的无限加载等特点。安装 ---- 要使用 Vue-Infinite-Loading 2.0，需要在 Vue.js 2.0 中使用。如果您想在 Vue.js 1.0 中使用，请安装 Vue-Infinite-Loading 1.3 版本。可以使用 npm 安装： `npm install vue-infinite-loading --save` 导入方式 ----- 可以使用 ES6 模块导入方式、CommonJS 模块导入方式或其他方式来导入 Vue-Infinite-Loading。 ES6 模块导入方式： `import InfiniteLoading from 'vue-infinite-loading';` `export default { components: { InfiniteLoading, },};` CommonJS 模块导入方式： `const InfiniteLoading = require('vue-infinite-loading');` `export default { components: { InfiniteLoading, },};` 其他方式： `<script src="/path/to/vue-infinite-loading/dist/vue-infinite-loading.js"></script>` `components: { VueInfiniteLoading: VueInfiniteLoading.default, }` 基础使用 ---- 在使用 Vue-Infinite-Loading 2.0 之前，需要创建一个基本的无限列表。有三个步骤： 1. 在模板中，用 v-for 创建一个列表。 2. 将 InfiniteLoading 组件放在列表的底部。 3. 将 InfiniteLoading 组件的 ref 属性设置为 infiniteLoading，因为要用它来触发事件。 4. 为 InfiniteLoading 组件创建并绑定一个加载回调函数。示例代码： ```html <template> <div> <p v-for="item in list"> Line: <span v-text="item"></span> </p> <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading"> </infinite-loading> </div> </template> <script> import InfiniteLoading from 'vue-infinite-loading'; export default { data() { return { list: [] }; }, methods: { onInfinite() { setTimeout(() => { const temp = []; for (let i = this.list.length + 1; i <= this.list.length + 20; i++) { temp.push(i); } this.list = this.list.concat(temp); this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded'); }, 1000); } }, components: { InfiniteLoading } }; </script> 在上面的代码中，我们使用 setTimeout 来模拟异步请求，并在 onInfinite 函数中 push 20 个数字到 list 数组中。不要忘了触发一个 $InfiniteLoading:loaded 事件，它将告诉 InfiniteLoading 组件，数据已经下载成功。示例：黑客新闻列表页面 ------------------------ 在这个例子中，我们将模仿一个黑客新闻列表页面，但是会用 InfiniteLoading 组件来实现无限滚动。

v-loading是一个Vue.js的指令，用于在接口未请求到数据之前显示加载中的效果，直到请求到数据后消失。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue进阶（六十一）：v-loading 实现加载效果](https://blog.csdn.net/sunhuaqiang1/article/details/95474410)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [mt-loading：自定义指令-loading](https://download.csdn.net/download/weixin_42107165/15327066)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

阅读全文

v-loading使用方法

相关推荐

Vue 2.0无限滚动插件vue-infinite-loading2.0中文教程

Vue+Element实现全局loading：Windows 8 Hyper-V联网设置详解

v-loading使用

v-loading="isLoading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" 调整图案和字体大小

el-dialog 使用 v-loading

v-loading的使用

v-loading和v-for

v-loading抖动

v-loading位置

v-loading 作用

vue v-loading

v-loading作用

elementui v-loading

v-loading延时

v-loading="loading"

v-loading样式添加loading字段

element-ui v-loading卡顿

v-loading若依

v-loading 提示语

最新推荐

C语言数组操作：高度检查器编程实践

管理建模和仿真的文件

【KUKA系统变量进阶】：揭秘从理论到实践的5大关键技巧

如何使用Python编程语言创建一个具有动态爱心图案作为背景并添加文字'天天开心（高级版）'的图形界面？

基于Swift开发的嘉定单车LBS iOS应用项目解析

"互动学习：行动中的多样性与论文攻读经历"

PROTEUS符号定制指南：个性化元件创建与修改的全面攻略

https://www.lagou.com/wn/爬取该网页职位名称，薪资待遇，学历，企业类型，工作地点数据保存为CSV文件的python代码

钗头凤声乐表演的二度创作分析报告

关系数据表示学习