LoadMore 页面提示


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

使用指南

在 Taro 文件中引入组件

  1. import { AtLoadMore } from 'taro-ui'

组件依赖的样式文件(仅按需引用时需要)

  1. @import "~taro-ui/dist/style/components/load-more.scss";
    @import "~taro-ui/dist/style/components/activity-indicator.scss";
    @import "~taro-ui/dist/style/components/button.scss";

一般用法

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

  1. import Taro from '@tarojs/taro'
    import { View } from '@tarojs/components'
    import { AtLoadMore } from 'taro-ui'
    export default class LoadMorePage extends Taro.Component {
    constructor () {
    super(...arguments)
    this.state = {
    status: 'more'
    }
    }
    handleClick () {
    // 开始加载
    this.setState({
    status: 'loading'
    })
    // 模拟异步请求数据
    setTimeout(() => {
    // 没有更多了
    this.setState({
    status: 'noMore'
    })
    }, 2000)
    }
    render () {
    return (
    <AtLoadMore
    onClick={this.handleClick.bind(this)}
    status={this.state.status}
    />
    )
    }
    }

参数

参数说明类型可选值默认值
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

LoadMore页面提示 - 图1