LoadMore加载更多

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.     "vtu-load-more": "/miniprogram_npm/vtuweapp/loadMore/vtu-load-more"
    3. }
    4.

    代码演示

    普通加载

    1. <vtuLoadMore :loading="true" load-label="加载中..."></vtuLoadMore>
    2. <vtuLoadMore :loading="loading" label="加载更多" v-on:load="bindLoad"></vtuLoadMore>
    3. <vtuLoadMore :end="true" end-label="已加载全部~"></vtuLoadMore>
    5. Page({
    6. data () {
    7.     return {
    8.       loading: false
    9.     }
    10.   },
    11.   methods: {
    12.     bindLoad: function() {
    13.       this.loading = true
    14.     }
    15.   }
    16. })
    17.

    自定义

    1. <vtuLoadMore :loading="true" icon="iconfont icon-biaoxingfill"></vtuLoadMore>
    2. <vtuLoadMore :loading="loading" label="加载更多" label-class="labelClass" icon-color="red" v-on:load="bindLoad"></vtuLoadMore>
    3. <vtuLoadMore :end="true" divider_line-color="orange" :divider_dash="true" end-label="已加载全部~"></vtuLoadMore>
    5. Page({
    6. data () {
    7.     return {
    8.       loading: false
    9.     }
    10.   },
    11.   methods: {
    12.     bindLoad: function() {
    13.       this.loading = true
    14.     }
    15.   }
    16. })
    17.

    自定义图片

    1. <vtuLoadMore :loading="loading" label="加载更多" label-class="labelClass" :img="require('../../assets/img/wait.gif')" v-on:load="bindLoad"></vtuLoadMore>
    3. Page({
    4. data () {
    5.     return {
    6.       loading: false
    7.     }
    8.   },
    9.   methods: {
    10.     bindLoad: function() {
    11.       this.loading = true
    12.     }
    13.   }
    14. })
    15.

    组件参数

    Props

    参数说明类型默认值必填
    show是否显示Booleantrue否
    loading是否加载中Booleanfalse否
    end是否加载全部Booleanfalse否
    rotate自定义加载图标是否旋转Booleantrue否
    icon自定义加载图标String内置图标否
    icon-color图标颜色String-否
    img自定义加载图片资源地址String-否
    img-mode自定义图片显示模式，参照image组件StringwidthFix否
    label文字内容，如加载更多String-否
    load-label加载时文字内容，如加载中String-否
    end-label加载全部时文字内容，如已加载全部String-否

    Divider分割线 Props

    加载完成时的底部样式，是引用了Divider分割线组件，具体参数设置可参照Divider组件参数。

    参数说明类型默认值必填
    divider_dash是否为虚线Booleanfalse否
    divider_align文字位置，centerleftrightStringcenter否
    divider_icon显示图标String-否
    divider_bg-color文字区域背景色String#fff否
    divider_font-color文字颜色String-否
    divider_line-color分割线颜色String#ddd否
    divider_width分割线宽度，如100px、80%String-否
    divider_round文字区域是否圆角Booleanfalse否
    divider_bold文字是否加粗Booleanfalse否

    Events

    方法名说明参数返回值
    bind:load触发加载更多事件--

    外部样式类

    外部样式类名说明
    v-class组件外部样式类

    LoadMore 底部加载更多 - 图1