更新记录

1.0.2（2023-08-03） 下载此版本

• 组件兼容 vue3

1.0.1（2022-05-31） 下载此版本

• 添加方法isLoadMore判断是否可加载下一页

1.0.0（2022-04-14） 下载此版本

• 提交组件

平台兼容性

hic-tips

分页加载，底部提示信息组件

五种状态

1. loading 加载中
2. error 加载失败
3. empty 没有数据
4. finished 已加载完最后一页，没有更多数据
5. loadmore 展示的数据未到页面底部 点击加载更多

基本用法

• 修改组件主题颜色：uni.scss文件引入默认的scss自定义变量

  @import '~@/uni_modules/hic-tips/theme.scss';

  ​ 或者不引入，直接在uni.scss文件添加scss自定义变量

  // 文字颜色
  $font-light: #c0c4cc;
  // icon颜色
  $hic-tips-main: #2595eb;
  // icon大小
  $hic-tips-font: 240rpx;
  // 圆弧的...颜色
  $hic-tips-border: lighten($hic-tips-main, 30%);
  // 按钮背景渐变色
  $hic-tips-btn-bg-color: linear-gradient(45deg, #0081ff, #1cbbb4);

• 配置文件 可修改config.js参数，统一全局样式

示例1

基本用法

<view v-for="item in list" :key="item">
    <text>{{ item }}</text>
</view>
<hic-tips
    :page="pagination.page"
    :limit="pagination.limit"
    :total="pagination.total"
    :loading="pagination.loading"
    :error="pagination.error"
    @load="getList"
    @loadmore="loadmore"></hic-tips>

export default {
    data() {
        return {
            list: [],
            pagination: {
                page: 1,
                limit: 10,
                total: 0,
                loading: false,
                error: false
            }
        }
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            this.pagination.loading = true;
            this.pagination.error = false;
            this.mockGetList({
                page: this.pagination.page,
                limit: this.pagination.limit
            }).then((res) => {
                this.list.push(...res.list);
                this.pagination.total = res.total;
            }).catch(() => {
                this.pagination.error = true;
            }).finally(() => {
                this.pagination.loading = false;
            });
        },
        loadmore() {
            this.pagination.page++;
            this.getList();
        },
        async mockGetList() {
            return {
                list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                total: 20
            };
        }
    }
}

示例2

页面滚动到底部，通过isLoadMore判断是否加载下一页

<view v-for="item in list" :key="item">
    <text>{{ item }}</text>
</view>
<hic-tips
    ref="hicTips"
    :page="pagination.page"
    :limit="pagination.limit"
    :total="pagination.total"
    :loading="pagination.loading"
    :error="pagination.error"
    @load="getList"
    @loadmore="loadmore"></hic-tips>

export default {
    data() {
        return {
            list: [],
            pagination: {
                page: 1,
                limit: 10,
                total: 0,
                loading: false,
                error: false
            }
        }
    },
    onLoad() {
        this.getList();
    },
    onReachBottom() {
        // 页面上拉触底事件的处理函数
        if (!this.$refs['hicTips'].isLoadMore()) return;
        this.loadmore();
    },
    methods: {
        getList() {
            this.pagination.loading = true;
            this.pagination.error = false;
            this.mockGetList({
                page: this.pagination.page,
                limit: this.pagination.limit
            }).then((res) => {
                this.list.push(...res.list);
                this.pagination.total = res.total;
            }).catch(() => {
                this.pagination.error = true;
            }).finally(() => {
                this.pagination.loading = false;
            });
        },
        loadmore() {
            this.pagination.page++;
            this.getList();
        },
        async mockGetList() {
            return {
                list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                total: 20
            };
        }
    }
}

API

Props

Methods

Events