wxc-loadmore

MinUI 小程序组件 - 页底提示

Install

  1. $ min install @minui/wxc-loadmore

Demos

默认到底

随机的icon和文字

页底提示 loadmore - 图1

  1. <template>
  2. <wxc-loadmore is-end="{{true}}"></wxc-loadmore>
  3. </template>
  4. <script>
  5. export default {
  6. config: {
  7. usingComponents: {
  8. 'wxc-loadmore': '@minui/wxc-loadmore'
  9. }
  10. },
  11. data: {},
  12. methods: {}
  13. }
  14. </script>
  15. <style>
  16. </style>

自定义文字到底

文字自定义,图片随机

页底提示 loadmore - 图2

  1. <template>
  2. <wxc-loadmore is-end="{{true}}" text="到底了~" icon="{{true}}"></wxc-loadmore>
  3. </template>
  4. <script>
  5. export default {
  6. config: {
  7. usingComponents: {
  8. 'wxc-loadmore': '@minui/wxc-loadmore'
  9. }
  10. },
  11. data: {},
  12. methods: {}
  13. }
  14. </script>
  15. <style>
  16. </style>

默认加载

默认icon加载中

页底提示 loadmore - 图3

<template>
  <wxc-loadmore></wxc-loadmore>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-loadmore': '@minui/wxc-loadmore'
    }
  },
  data: {},
  methods: {}
}
</script>

<style>
</style>

只有文字到底

只显示文字,没有icon

页底提示 loadmore - 图4

<template>
  <wxc-loadmore
    is-end="{{true}}"
    text="到底啦"
  >
  </wxc-loadmore>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-loadmore': '@minui/wxc-loadmore'
    }
  },
  data: {},
  methods: {}
}
</script>

<style>
</style>

自定义文字加载

文字自定义

页底提示 loadmore - 图5

<template>
  <wxc-loadmore
    text="正在努力加载中..."
    icon="{{true}}"
  >
  </wxc-loadmore>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-loadmore': '@minui/wxc-loadmore'
    }
  },
  data: {},
  methods: {}
}
</script>

<style>
</style>

自定义icon到底

icon自定义,文字随机

页底提示 loadmore - 图6

<template>
  <wxc-loadmore
    is-end="{{true}}"
    text="到底啦"
    icon="https://s10.mogucdn.com/mlcdn/c45406/171016_47j96cl3hdhhdf7ajg8hg2kd13gdc_400x400.png"
  >
  </wxc-loadmore>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-loadmore': '@minui/wxc-loadmore'
    }
  },
  data: {},
  methods: {}
}
</script>

<style>
</style>

自定义图片加载

icon文字都自定义

页底提示 loadmore - 图7

<template>
  <wxc-loadmore
    text="正在努力加载中..."
    icon="https://s10.mogucdn.com/mlcdn/c45406/171018_8gj08gbl9fj6igb380dec9k1ifhe2_32x32.png"
  >
  </wxc-loadmore>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-loadmore': '@minui/wxc-loadmore'
    }
  },
  data: {},
  methods: {}
}
</script>

<style>
</style>

API

Loadmore【props】

名称描述
is-end[说明]:是否到底。[类型]:Boolean默认值:true
icon[说明]:图标。设为true的时候,调用默认图标[类型]:String[默认值]:[到底]随机 / [加载] loading
text[说明]:文案。[类型]:String[默认值]:[到底]随机 / [加载] 加载中…
地址
loadmore 组件文档 https://meili.github.io/min/docs/minui/index.html#loadmore
loadmore 组件源码 https://github.com/meili/minui/tree/master/packages/wxc-loadmore
MinUI 组件库 https://github.com/meili/minui

Preview

loadmore

ChangeLog

v1.0.2(2017.11.02)

  • update .npmignore

v1.0.1(2017.10.24)

  • 初始版本