更新记录

v1.0.0(2021-07-07) 下载此版本

第一个版本,目前仅测试了微信小程序、app、h5,其他端未知。


平台兼容性

简介

快速调出加载动画、缺省页面的组件。

事件

  • reload()

    出现缺省页面时,点击刷新按钮时的回调事件

  • back()

    出现缺省页面时,点击返回按钮时的回调事件

方法

  • startLoading(OBJECT)

    开始加载动画

    OBJECT参数说明
    参数名 类型 默认值 说明
    hidden Boolean false 是否隐藏页面
    type Number 1 动画类型: 1 菊花 2 自定义动画
    title String "加载中" 提示语
    titleSlow String "加载缓慢" 加载缓慢提示语
    mask Boolean true 加载中页面是否不可点击
  • endLoading()

    结束加载

  • startEmpty(type)

    显示缺省页面:显示缺省页面时会自动关闭加载动画

    参数说明
    参数名 类型 默认值 说明
    type String "fail" 缺省页面类型
  • endEmpty()

    结束缺省页面

使用示例

<template>
  <cj-page ref="cjPage" @reload="reload" @back="back">
    <!-- 写页面内容 -->
    <view></view>
  </cj-page>
</template>

<script>
  // 此处为示例,真实项目建议全局引入
  import CjPage from '@/components/cj-page/cj-page.vue'

  export default {
    components: { CjPage },
    data() {
      return {}
    },
    onLoad() {
      // 开始加载动画
      // this.$refs.cjPage.startLoading()

      // 开始自定义加载动画并隐藏页面
      // this.$refs.cjPage.startLoading({type: 2, hidden: true})

      // 结束加载动画
      // this.$refs.cjPage.endLoading()

      // 开始缺省页面
      // this.$refs.cjPage.startEmpty()

      // 结束缺省页面
      // this.$refs.cjPage.endEmpty()
    },
    methods: {
      reload() {
        console.log('点击了刷新')
      },
      back() {
        console.log('点击了返回')
      }
    }
  }
</script>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问