Fast-UI

# uni-load-more 加载状态

用于列表中，做滚动加载使用，展示 loading 的各种状态

# 平台差异

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序
√ √ √ √ √ √

# 基本使用

  • 通过status传入不同状态值显示不同加载状态
<template>
  <view>
    <uni-load-more :status="more" ></uni-load-more>
  </view>
</template>
<script>
    export default{
        data(){
            return{
               status:'more'
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 设置提示语

  • 可以通过contentText设置不同状态时的提示语
<template>
  <view>
    <uni-load-more :status="more" :contentText="contentText"></uni-load-more>
  </view>
</template>
<script>
    export default{
        data(){
            return{
                status:'more',
                contentText:{
                   contentdown:'上拉显示更多',
                   contentrefresh: '正在加载...',
                   contentnomore: '没有更多数据了'
                }
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# API

# Props

参数 说明 类型 默认值 可选值
status loading 的状态 String more more（loading前）、loading（loading中）、noMore（没有更多了
showIcon 是否显示 loading 图标 Boolean true true/false
color 字体颜色 String #777777
contentText 各状态文字说明 Object contentdown: '上拉显示更多',contentrefresh: '正在加载...',contentnomore: '没有更多数据了'

fu-star 评分