qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

LoadMore 页面提示

用在列表里面，做滚动加载使用

使用指南

在 Taro 文件中引入组件

import { AtLoadMore } from 'taro-ui-vue3'

组件依赖的样式文件（仅按需引用时需要）

@import "taro-ui-vue3/dist/style/components/load-more.scss";

一般用法

说明: 开发者自行控制 status 来控制展示的状态

<template>
  <view>
    <AtLoadMore
      @click="handleClick"
      :status="status"
    />
  </view>
</template>
<script>
import { AtLoadMore } from 'taro-ui-vue3'
export default {
  name: 'AtLoadMoreDemo',
  data() {
    return {
      status: 'more'
    }
  },
  methods: {
    handleClick() {
      this.status = 'loading'
      setTimeout(() => {
        this.status = 'noMore'
      }, 2000);
    }
  }
}
</script>

参数

参数说明类型可选值默认值
noMoreTextStylenoMore 状态显示文案样式String or Object--
moreBtnStylemore 状态按钮样式String or Object--
status组件状态，more 状态显示查看更多按钮，loading 状态显示加载状态，noMore 显示无更多数据String'more', 'loading', 'noMore''more'
moreTextmore 状态显示文案String-'查看更多'
loadingTextloading 状态显示文案String-'加载中'
noMoreTextnoMore 状态显示文案String-'没有更多'

事件

事件名称说明返回参数
onClickmore 状态点击触发的事件event