基础

• taro官方文档

• nutUi文档

  使用

• npm run dev:h5 运行到h5

• npm run dev:weapp 运行到微信

  待完成

• 上拉加载、下拉刷新

• 自定义顶部导航栏
• 多端适配

• Tabs组合 上拉加载、下拉刷新

  完成

• 加载cssModule

  • 新建xxx.module.scss文件
  • script 文件引入 import xx from ‘./xxx.module.scss’;
  • 对应的:class=”xx.xx” 样式

    setup(){

        return {
            styles
        }
    }

• vuex集成
• nutUi集成
  • 配置按需加载
  • register_components文件夹index.ts文件添加要使用的组件
• 导航栏
• 别名配置
  • @/src
• 内容区返回顶部

• 上拉加载，下拉刷新

  • 待优化下拉刷新

    支持平台

• [x] h5

• 微信小程序
• 支付宝小程序

使用文档说明

上拉加载、下拉刷新

• 组件名称custom-content
• 组件位置 @src/components/Conntent/index.vue

• 参数 | 参数名称 | 说明 | 默认值 | 是否必填 | | —- | —- | —- | —- | | title | tab标题 | | 否 | | isLeft | 是否显示左侧返回 | false | 否 | | refresh | 是否开启刷新 | false | 否 |

• 方法 | 参数名称 | 说明 | 默认值 | 是否必填 | | —- | —- | —- | —- | | loadMore | 加载更多，刷新 | | | | onScroll | 滚动监听回调 | | | | goTop | 返回顶部触发 | | |

• 示例 ```vue

<a name="ZTdzm"></a>
### tabs组合  上拉加载、下拉刷新

   - 组件名称custom-content
   - 组件位置    @src/components/Conntent/index.vue
   - 参数
| 参数名称 | 说明 | 默认值 | 是否必填 |
| --- | --- | --- | --- |
| title | tab标题 |  | 否 |
| isLeft | 是否显示左侧返回 | false | 否 |
| refresh | 是否开启刷新 | false | 否 |

   - 方法
| 参数名称 | 说明 | 默认值 | 是否必填 |
| --- | --- | --- | --- |
| loadMore | 加载更多，刷新 |  |  |
| onScroll | 滚动监听回调 |  |  |
| goTop | 返回顶部触发 |  |  |
| list | 顶部tabs组合数据类型数组 TabsListType |  |  |

   - 示例
```vue
<template>
    <custom-content title="tabs" :isTab="true" :refresh="true" :list="list">
        <template v-for="item in list" v-slot:[item.slotName]>
            {{item.title}}
        </template>
    </custom-content>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import CustomContent from '@src/components/Conetnt/index.vue';
import { TabsListType } from '@src/types';

export default defineComponent({
  name: 'IndexTabs',
  components: {
    CustomContent,
  },
  setup() {
    const list = ref<TabsListType[]>([
      {
        title: '第一项',
        slotName: 'slot1',
      },
      {
        title: '第二项',
        slotName: 'slot2',
      },
      {
        title: '第三项',
        slotName: 'slot3',
      },
    ]);
    return {
      list,
    };
  },
});
</script>

自定义顶部导航栏

• 组件名称NavBar
• 组件位置 @src/components/NavBar/index.vue

• 参数 | 参数名称 | 说明 | 默认值 | 是否必填 | | —- | —- | —- | —- | | title | tab标题 | | 否 | | isLeft | 是否显示左侧返回 | false | 否 | | desc | 右侧描述 | | 否 | | titIcon | 标题带icon | | | | icon | 左侧 图标名称 或图片链接 | | |

• 示例 ```vue

  ```