empty 空状态

Empty组件通常用于在没有数据或内容可显示时，向用户展示一个空状态的界面，以提供反馈和引导用户进一步操作。这种组件通常用于列表、表格、卡片等容器元素中，用于指示当前没有可用的数据。

Props参数

名称	类型	是否必传	默认值	描述
type	TMMEmpty	否	-	快捷类型
通过传递类型直接使用快捷的empty
text	string	否	-	文本
优先级高于type
src	string	否	-	图片地址
优先级高于type
imgStyle	CSSProperties	否	-	图片样式
fixed	boolean	否	-	浮动居中
决定定位居中
suffix	ReactNode	否	-	后面需要添加的元素

示例

import { View } from '@tarojs/components'
import { useState } from 'react'
import MMEmpty from '~/components/empty'
import MMButton from '~/components/button'
import MMPageContainer from '../_components/page-container'
import PageDemoBlock from '../_components/page-demo-block'

export default () => {
  const list: any[] = ['data', 'contacts', 'grade', 'internet', 'location', 'message', 'record', 'update']
  const [index, setIndex] = useState(0)
  const [fixed, setFixed] = useState(false)

  function handleClick() {
    setIndex((pre) => (pre + 1 >= list.length ? 0 : pre + 1))
  }

  return (
    <MMPageContainer title="空状态">
      <PageDemoBlock title="使用内置状态">
        <MMButton onClick={handleClick}>切换内置类型</MMButton>
        <View className="spacing" />
        <View>传入 fixed 属性支持页面绝对定位至中间</View>
        <View className="spacing" />
        <MMButton onClick={() => setFixed((pre) => !pre)}>是否fixed</MMButton>
      </PageDemoBlock>

      <MMEmpty type={list[index]} fixed={fixed} />

      <View className="spacing" />
      <View className="spacing" />
      <View className="spacing" />
      <PageDemoBlock title="使用图片">
        <View>支持自定义传入图片和文本</View>
        <View className="spacing" />
      </PageDemoBlock>

      <MMEmpty
        src="https://wmm-mock.oss-cn-shanghai.aliyuncs.com/mock/head0.png"
        text="嘿嘿嘿"
        imgStyle={{ height: 100, width: 100, borderRadius: 15, overflow: 'hidden' }}
      />
    </MMPageContainer>
  )
}