wxc-loading

MinUI 小程序组件 - 加载提示

Install

  1. $ min install @minui/wxc-loading

Demos

配置图片

配置女装小程序 loading 背景图

加载提示 loading - 图1

  1. <template>
  2.   <wxc-loading
  3.     is-show="{{$loading.isShow}}"
  4.     image="https://s10.mogucdn.com/mlcdn/c45406/170607_5241335cb37ka3ab7781ddh504ggh_200x200.png"
  5.     slip="http://s10.mogucdn.com/p1/160715/upload_ifrgmmzwmyydknldhezdambqmeyde_200x200.png"
  6.   ></wxc-loading>
  7.   <button bindtap="showLoading">自定义图片</button>
  8. </template>
  10. <script>
  11.   export default {
  12.     config: {
  13.       usingComponents: {
  14.         'wxc-loading': '@minui/wxc-loading'
  15.       }
  16.     },
  17.     data: {
  18.       $loading: {
  19.         isShow: false
  20.       }
  21.     },
  22.     /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  23.     methods: {
  24.       showLoading() {
  25.         this.setData({
  26.           $loading: {
  27.             isShow: true
  28.           }
  29.         })
  30.         setTimeout(() => {
  31.           this.setData({
  32.           $loading: {
  33.             isShow: false
  34.           }
  35.         })
  36.       }, 1000)
  37.       }
  38.     }
  39.   }
  40. </script>
  42. <style>
  43. </style>

设置type

type: mall，小店微商城loading样式

加载提示 loading - 图2

  1. <template>
  2.   <wxc-loading
  3.     is-show="{{$loading.isShow}}"
  4.     type="mall"
  5.   ></wxc-loading>
  6.   <button bindtap="showLoading">设置 type</button>
  7. </template>
  9. <script>
  10. export default {
  11.   config: {
  12.     usingComponents: {
  13.       'wxc-loading': '@minui/wxc-loading'
  14.     }
  15.   },
  16.   data: {
  17.     $loading: {
  18.       isShow: false
  19.     }
  20.   },
  21.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  22.   methods: {
  23.     showLoading() {
  24.       this.setData({
  25.         $loading: {
  26.           isShow: true
  27.         }
  28.       })
  29.       setTimeout(() => {
  30.         this.setData({
  31.           $loading: {
  32.             isShow: false
  33.           }
  34.         })
  35.       }, 1000)
  36.     }
  37.   }
  38. }
  39. </script>
  41. <style>
  42. </style>

调用方法控制显示

调用 show() 方法显示 loading

  1. <template>
  2.     <wxc-loading
  3.         class="J_loading"
  4.         type="mall"
  5.     ></wxc-loading>
  6.     <button bindtap="showLoading">调用 show() 方法</button>
  7. </template>
  9. <script>
  10.   export default {
  11.     config: {
  12.       usingComponents: {
  13.         'wxc-loading': '@minui/wxc-loading'
  14.       }
  15.     },
  16.     data: {},
  17.     /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  18.     methods: {
  19.       showLoading() {
  20.         let $loading = this.selectComponent('.J_loading')
  21.         $loading && $loading.show()
  23.         setTimeout(() => {
  24.           $loading && $loading.hide()
  25.         }, 2000)
  26.       }
  27.     }
  28.   }
  29. </script>
  31. <style>
  32. </style>

API

Loading【props】

名称描述
is-show[说明]：loading的显示控制属性。[类型]：String[默认值]：false
type[说明]：样式类型。type的优先级低于 image, slip。[类型]：String[默认值]："mgj" [可选值]：mgj（蘑菇街女装精选 loading 样式）， mall（企鹅微商城 loading 样式）
image[说明]：loading主背景图， 必须与slip同时指定。[类型]：String[默认值]：""
slip[说明]：loading动画背景图，必须与image同时指定。[类型]：String[默认值]：""

Loading【methods】

名称描述
show[说明]：显示loading。[类型]：Function[参数]：void[返回]：void
hide[说明]：隐藏loading。[类型]：Function[参数]：void[返回]：void
地址
loading 组件文档 https://meili.github.io/min/docs/minui/index.html#loading
loading 组件源码 https://github.com/meili/minui/tree/master/packages/wxc-loading
MinUI 组件库 https://github.com/meili/minui

Preview

loading

ChangeLog

v1.0.6（2018.01.09)

  • z-index 层级规范方案修改

v1.0.3（2018.01.04）

  • 更换小店微商城图标，规范 z-index 层级

v1.0.2（2017.11.02）

  • update .npmignore

v1.0.1（2017.10.24）

  • 初始版本