taro 封装一个加载中组件

最新推荐文章于 2024-02-02 11:02:10 发布

waillyer

最新推荐文章于 2024-02-02 11:02:10 发布

阅读量1.5k

点赞数

分类专栏： Taro

本文链接：https://blog.csdn.net/waillyer/article/details/117410026

版权

Taro UI 自定义组件加载状态 hooks React Redux

关键词由CSDN通过智能技术生成

Taro 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

### 一.正常使用loading

1.组件中引入

import { AtSearchBar, AtActivityIndicator } from 'taro-ui';
  const loading = useSelector(store => store.loading);
return（
     {listParams?.page === 1 && loading.effects['shipOrderList/fetchShipOrderList'] ? (
                <AtActivityIndicator size="38" mode="center" content="努力加载中..." />
            ) : (
                <View className="customer-wrapper">
                    {shipOrderList?.length ? (
                        <>
                            {shipOrderList?.map(item => {
                                return <OrderInfo key={item.id} item={item} />;
                            })}
                        </>
                    ) : (
                        <Empty />
                    )}
                    <ActivityIndicator
                        loading={loading.effects['shipOrderList/fetchShipOrderList']}
                    />
                </View>
            )}
            }

二.公共组件

components/ActivityIndicator/

import React from 'react';
import { AtActivityIndicator } from 'taro-ui';
import { View } from '@tarojs/components';

export default function ActivityIndicator(props) {
    return (
        <>
            {props.loading ? (
                <View
                    style={{
                        display: 'flex',
                        justifyContent: 'center',
                        paddingTop: '10px',
                        paddingBottom: '10px',
                    }}
                >
                    <AtActivityIndicator content="加载中..." />
                </View>
            ) : null}
        </>
    );
}

三.hooks

src/utils/hooks/useLoading.js

import { useSelector } from 'react-redux';

export const LoadingType = {
    EFFECT: 'effects',
    MODEL: 'models',
    GLOBAL: 'global',
};

const useLoading = (targets = [], type = LoadingType.EFFECT) => {
    const loadingState = useSelector(state => state.loading) || {};
    let isLoading = false;
    if (type in loadingState) {
        isLoading =
            type === LoadingType.GLOBAL
                ? !!loadingState[type]
                : targets.some(target => !!loadingState[type][target]);
    }
    return isLoading;
};

export default useLoading;

四.详情页等使用组件

src/components/PageWrapper/index.js

import React from 'react';
import { View } from '@tarojs/components';
import { AtActivityIndicator } from 'taro-ui';
import useLoading from '@/utils/hooks/useLoading';

const PageWrapper = ({ effects, children }) => {
    const loading = useLoading(effects);
    return (
        <View>
            {loading ? (
                <AtActivityIndicator
                    className="loading"
                    size="38"
                    mode="center"
                    content="努力加载中..."
                />
            ) : (
                children
            )}
        </View>
    );
};

export default PageWrapper;

使用

import PageWrapper from '@/components/PageWrapper';
const DEFAULT_TEXT = '-';
export default () => {
return (
    <PageWrapper effects={['shipOrderDetail/fetchShipOrderDetail']}>
            <View className="container">
                <View className="section-title">基本信息</View>
           	}
           	</PageWrapper>
           	)

或者直接引入

import { AtButton, AtActivityIndicator } from 'taro-ui';
import Empty from '@/components/Empty';
import useLoading from '@/utils/hooks/useLoading';
const Product = () => {
    const dispatch = useDispatch();
    const productSelect = useSelector(state => state.shipOrderProductSelect);
    const loading = useLoading(['shipOrderProductSelect/fetchProductInfo']);
    useDidShow(() => {
        dispatch({ type: 'shipOrderProductSelect/fetchProductInfo' });
    });
    }
      return !loading ? (
        <View className="product-select__wrap">
        内容
        </View>
         ) : (
        <AtActivityIndicator className="loading" size="38" mode="center" content="努力加载中..." />
    );

缺省组件

src/components/Empty/index.jsx

import React from 'react';
import { View, Image } from '@tarojs/components';

import empty from '@/assets/empty.png';

import './index.scss';

export default function Empty(props) {
    const { content } = props;
    return (
        <View className='empty-wrapper'>
            <Image src={empty} />
            <View>{content || '暂无结果'}</View>
        </View>
    )
}

//index.scss

.empty-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    color: #b8bec8;
    font-size: 28px;
    text-align: center;
    transform: translate(-50%, -50%);
    image {
        width: 190px;
        height: 188px;
        margin-bottom: 30px;
        margin-left: 30px;
    }
}