前端Vue自定义加载中loading加载结束end组件 可用于分页展示 页面加载请求

这篇具有很好参考价值的文章主要介绍了前端Vue自定义加载中loading加载结束end组件 可用于分页展示 页面加载请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端Vue自定义加载中loading加载结束end组件 可用于分页展示 页面加载请求, 请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13219

效果图如下:

前端Vue自定义加载中loading加载结束end组件 可用于分页展示 页面加载请求

前端Vue自定义加载中loading加载结束end组件 可用于分页展示 页面加载请求文章来源地址https://www.toymoban.com/news/detail-501909.html

实现代码如下:

cc-paging

使用方法


<!-- 加载中用法 isLoading:是否加载 isEnd:是否结束加载 -->

<cc-paging :isLoading="true" :isEnd="false"></cc-paging>

<!-- 加载完成 isLoading:是否加载 isEnd:是否结束加载-->

<cc-paging :isEnd="true" :isLoading="false"></cc-paging>

HTML代码实现部分


<template>

<view class="content">

<view style="margin-left: 20px;"> 基本用法 </view>

<!-- 加载中用法 isLoading:是否加载 isEnd:是否结束加载 -->

<cc-paging :isLoading="true" :isEnd="false"></cc-paging>

<!-- 加载完成 isLoading:是否加载 isEnd:是否结束加载-->

<cc-paging :isEnd="true" :isLoading="false"></cc-paging>

<view style="margin-left: 20px;"> 动态使用用法 </view>

<!-- 加载中用法 -->

<cc-paging :isEnd="!isLoad" :isLoading="isLoad"></cc-paging>

<button @click="changeStatusClick">切换状态</button>

</view>

</template>

<script>

export default {

data() {

return {

isLoad: true

}

},

methods: {

changeStatusClick() {

this.isLoad = !this.isLoad;

}

}

}

</script>

<style>

page {

background: white;

}

.content {

display: flex;

padding-top: 29px;

flex-direction: column;

}

</style>

组件实现代码


<template>

    <view class="paging">

        <slot></slot>

        <view class="loading" v-if="isLoading">

            <view class="flexcenter">

                <image lazyLoad src="https://qiniu-image.qtshe.com/qtsloading.gif"></image>

                <view class="loadtips">加载中</view>

            </view>

        </view>

        <view class="is-end" v-if="isEnd">我是有底线的哦~</view>

    </view>

</template>

<script>

export default {

    data() {

        return {};

    },

    props: {

        isEnd: {

            type: Boolean,

            default: false

        },

        isLoading: {

            type: Boolean,

            default: false

        }

    }

};

</script>

<style>

@import './index.css';

</style>

到了这里,关于前端Vue自定义加载中loading加载结束end组件 可用于分页展示 页面加载请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端Vue仿美团地址管理组件列表组件 可用于电商平台收获地址管理

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。 通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月16日
    浏览(40)
  • iframe 标签(用于嵌套网页)及loading加载动画效果

            1. iframe 是 HTML元素,用于在网页中内嵌另外一个网页.         2. iframe 默认有一个宽高,存在边界.         3. iframe 是一个行内块级元素,可以通过 display 修改.         1. src : 指定内联网页的地址         2. frameborder : iframe 默认有个边界,可以设置frameborder 为 0 清除边

    2024年02月04日
    浏览(53)
  • 前端Vue自定义顶部搜索框 热门搜索 历史搜索 用于搜索跳转使用

    前端Vue自定义顶部搜索框 热门搜索 历史搜索 用于搜索跳转使用, 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下: 自定义顶部搜索框 用于搜索跳转使用方法 HTML代码实现部分

    2024年02月09日
    浏览(52)
  • vue3自定义封装组件:消息提示、轮播图、加载更多、骨架屏组件

    定义组件:src/components/library/xtx-infinite-loading.vue 注册组件:src/components/library/index.js  引用组件:src/main.js 使用组件: .vue文件 首先是轮播图的样式:src/components/library/xtx-carousel.vue  然后是轮播图的结构与逻辑封装:src/components/library/xtx-carousel.vue 插件注册:src/components/library

    2024年02月12日
    浏览(44)
  • vue前端开发自学,异步加载组件,提升用户端的客户体验度

    vue前端开发自学,异步加载组件,提升用户端的客户体验度!现实项目开发时,组件的数量非常庞大,如果都是一口气加载完,对手机用户来说,体验度会很差。因此,非常有必要使用异步加载。 那就是,用到了哪个组件,再去加载它就行了。用不到的时候,不加载它。下面看

    2024年01月16日
    浏览(43)
  • inject: [‘reload‘] 是一个在 Vue.js 组件中常见的语法,用于将父组件中定义的 reload 方法注入到子组件中。

    详细解释如下: inject : 这是 Vue.js 提供的一个选项,允许子组件从父组件中注入数据、方法等。 [\\\'reload\\\'] : 这表示子组件想要从父组件中注入名为  reload  的方法或数据。 在给定的代码片段中, reload  方法被注入到了子组件中,使得子组件可以直接调用这个方法。这通常用于

    2024年01月19日
    浏览(39)
  • 前端vue自定义table 表格 表格组件 Excel组件

    前端组件化开发与Excel组件设计 一、前端开发的复杂性与组件化的必要性 随着技术的发展,前端开发的复杂度越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。

    2024年02月09日
    浏览(52)
  • 前端Vue自定义简单好用商品分类列表组件 侧边栏商品分类组件

    前端Vue自定义简单好用商品分类列表组件 侧边栏商品分类组件 , 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13148 效果图如下: 使用方法 HTML代码实现部分

    2024年02月10日
    浏览(45)
  • 前端Vue自定义地址展示地址选择地址管理组件

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月11日
    浏览(45)
  • 前端Vue组件之仿京东拼多多领取优惠券弹出框popup 可用于电商商品详情领券场景使用

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月16日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包