更新记录

1.1.0（2021-11-22） 下载此版本

zk-comm-tabs 新增tabs组件，支持滑动，吸顶

1.0.3（2021-11-22） 下载此版本

更新结构

1.0.2（2021-11-22） 下载此版本

更新文档

平台兼容性

uni-app

环境

• scss、typescript、vue3
• 需要安装uni-ui
  • 详细配置参考地址

功能介绍

• 上拉加载,下拉刷新
  • 分页加载数据
• 自定义导航栏

存在问题

• v-model:xxx 无法使用

目录结构

• components

  • zk-comm-content
  • zk-comm-content.vue 内容区域
  • zk-comm-navbar.vue 自定义导航栏
  • zk-comm-scroll.vue 上拉加载,下拉刷新

• utils目录

  • log.ts log日志输出
  • toast.ts 提示

    其他

• uniapp、vue3、typescript 基础项目

  • github地址

• 页面自定义了导航栏,需要配置开启自定义导航栏

  • pages.json 配置 navigationStyle 为custom

    "globalStyle": {
    // ...
    "navigationStyle": "custom"
    }

    参数

    zk-comm-content

props

emits

zk-comm-scroll

props

emits

zk-comm-navbar

使用示例

<template>
   <zk-comm-scroll title="加载更多"
    :refresh="true"
    @refresh="refresh"
    :page="page"
    :size="size"
    @update:page="updatePage"
    @update:size="updateSize"
    @load-more="loadMore"
   >
      <view v-for="(item, index) in list" :key="index" style="border: 1px solid red;height: 100px">
        <text>{{item.id}} {{item.title}}</text>
      </view>
    </zk-comm-scroll>
</template>

<script lang="ts">
import {
  defineComponent, ref, onMounted,
} from 'vue';
import { cloneDeep } from 'lodash';

interface List {
  title: string;
  id: number
}
export default defineComponent({
  name: 'PagesLoadMore',
  setup() {
    const page = ref(1);
    const size = ref(10);
    const list = ref<List[]>([]);
    const sourceList = ref<List[]>([]);

    // moack 数据
    function getList() {
      const result: List[] = [];
      for (let i = 0; i < 35; i += 1) {
        result.push({
          title: `当前是第${i}项`,
          id: i,
        });
      }
      sourceList.value = result;
      const v = cloneDeep(result);
      list.value = cloneDeep(v.splice(0, 10));
    }
    onMounted(() => {
      getList();
    });
    // 加载更多
    function loadMore(done: Function) {
      const result = cloneDeep(sourceList.value);
      const v = result.splice((page.value - 1) * size.value, 10);
      setTimeout(() => {
        done(v);
        list.value = list.value.concat(v);
      }, 2000);
    }
    // 刷新
    function refresh(done: Function) {
      setTimeout(() => {
        done();
        const result = cloneDeep(sourceList.value);
        list.value = result.splice(0, 10);
      }, 2000);
    }

    function updatePage(val: number) {
      page.value = val;
    }
    function updateSize(val: number) {
      size.value = val;
    }

    return {
      refresh,
      page,
      size,
      loadMore,
      list,
      updatePage,
      updateSize,
    };
  },
});
</script>

<style>

</style>