EXE大前端团队的Taro页面布局组件，支持在H5和小程序中使用，更多组件内容不断更新中~

简介

基于 Taro 框架 v1.3.9 开发，为了简化页面布局，解决列表页面经常使用到的下拉刷新、加载更多、顶部和底部区域固定、内容区域自适应高度等问题。将页面分为 header、content、footer三个部分，可以自由设置是否需要 header 和 footer，content 会根据 header 和 footer 调节高度占满屏幕。

组件开发中，可能涉及调整，需要留意最新修改

2020年5月9日 将taro版本升级到v2.0.6

使用

首先，使用以下命令安装：

# yarn
$ yarn add eft-cool-taro-ui

# npm
$ npm i eft-cool-taro-ui --save

然后在app.scss引入样式：

@import '~eft-cool-taro-ui/style/index.scss';

最后在页面中使用：

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { EButton, EPage, EModal, ENavbar } from 'eft-cool-taro-ui'

import './index.scss'

export default class Index extends Component {

  config = {
    navigationBarTitleText: '首页'
  }

  constructor() {
    super()
    this.state = {
      noMore: false,
      hasMore: true,
      scrollTop: 0
    }
  }

  componentWillMount() { }

  componentDidMount() {
    Taro.eventCenter.trigger('ERefreshStart')
    // 模拟请求
    setTimeout(() => {
      Taro.eventCenter.trigger('ERefreshEnd')
      this.setState({
        hasMore: true
      })
    }, 1000)
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  refresh = () => {
    this.setState({
      refreshStatus: 1
    })
    Taro.showToast({
      title: '刷新',
      icon: 'none'
    })
    // 模拟请求
    setTimeout(() => {
      this.setState({
        refreshStatus: 2
      })
    }, Math.random() * 1000)
  }
  refreshLater = () => {
    setTimeout(() => {
      this.refresh()
    }, 1000)
  }

  loadMore = () => {
    setTimeout(() => {
      this.setState({
        hasMore: false,
        noMore: true
      })
    }, 1000)
  }

  openModel = () => {
    this.setState({
      open: true
    })
  }

  hideModal = () => {
    this.setState({
      open: false
    })
  }

  toTop = () => {
    this.setState({
      scrollTop: 0
    })
  }

  handleScrollEnd = (e) => {
    this.setState({
      scrollTop: e.detail.scrollTop
    })
  }

  goBack = () => {
    return true
  }
  render() {
    const { noMore, hasMore, refreshStatus, open, scrollTop } = this.state
    const header = <ENavbar leftText='返回' rightText='Model' onClickRightText={this.openModel} onClickLeft={this.goBack} >首页</ENavbar>
    const footer = <EButton outline circle onClick={this.refreshLater}>1秒后显示刷新</EButton>
    const refresherConfig = {
      recoverTime: 300,
      refreshTime: 1000
    }
    return (
      <View>
        <EModal openModel={open} position='right' onHide={this.hideModal}>
          <View>model</View>
        </EModal>
        <EPage
          renderHeader={<View className='header-container'>{header}</View>}
          renderFooter={<View className='footer-container'>{footer}</View>}
          onRefresh={this.refresh}
          onLoadMore={this.loadMore}
          noMore={noMore}
          hasMore={hasMore}
          hasMoreText='loading'
          refresherConfig={refresherConfig}
          refreshStatus={refreshStatus}
          scrollTop={scrollTop}
          onScrollEnd={this.handleScrollEnd}
        >
          <View className='main-container'>
            <View> Content </View>
            <EButton onClick={this.openModel}>显示modal</EButton>
            <View style={{ height: '30px' }}>content</View>
            <View style={{ height: '300px' }}>content</View>
            <View style={{ height: '300px' }}>content</View>
            <View style={{ height: '300px' }}>content</View>
            <View style={{ height: '300px' }}>content</View>
            <EButton onClick={this.openModel}>显示modal</EButton>
            <EButton onClick={this.openModel}>显示modal</EButton>
            <EButton onClick={this.openModel}>显示modal</EButton>
            <EButton onClick={this.toTop}>回到顶部</EButton>
          </View>
        </EPage>
      </View>
    )
  }
}

props

refresherConfig

EPage 支持通过事件来显示和隐藏刷新动画：

Taro.eventCenter.trigger('ERefreshStart') // 显示刷新
Taro.eventCenter.trigger('ERefreshEnd') // 隐藏刷新

组件和props

正在更新完善……

EModal

滑出一个模态框

ENavbar

导航栏组件

EActivityIndicator

活动指示器，使用显示加载

EButton

按钮组件