更新记录

2.0.3（2024-03-27）

1.修复接口错误状态下，上拉重复加载的问题。

2.0.2（2024-03-27）

1.兼容了uni-load-more 2.修改了loadmore取值方式 3.增加了url参数示例

2.0.1（2024-03-20）

1.更新文档 2.更新demo 3.修改一些代码

平台兼容性

list-mixin

前言

因依附于Uni-App环境使用原生onPullDownRefresh、onReachBottom来处理分页，所以无法进行深度的组件式封装， 目前只能考虑采用混合的方式。

功能点

1.少量的配置和代码即可实现上拉加载、下拉刷新、搜索

2.尽量兼容大众化组件方便、通用、心智程度低。

示例

<template>
    <view class="page test">
        <!-- 演示标题正式环境删除 -->
        <view class="notice">本Demo演示下拉刷新和上拉加载</view>
        <!-- 处理搜索相关 -->
        <view class="search-wrap">
            <!-- 自定义搜索dom结构 start -->
            <u-search v-model="mxListConf.search.text" :showAction="false" @search="onSearch"></u-search>
            <!-- 自定义搜索dom结构 end -->
        </view>
        <!-- 处理列表相关 -->
        <view class="list-wrap">
            <!-- 自定义列表dom结构 start -->
            <view class="news-li" v-for="news in mxListConf.list" :key="news.id">
                <view>{{ news.title }}</view>
                <view class="new-content">
                    <text>{{ news.content }}</text>
                </view>
                <view class="new-content">
                    <text>{{ news.search }}</text>
                </view>
            </view>
            <!-- 自定义列表dom结构 end -->
        </view>
        <!-- 暂无数据 -->
        <u-empty v-if="mxListConf.list.length == 0 && mxListConf.finished"></u-empty>
        <!-- 加载更多 -->
        <view v-else class="load-more" style="margin-top: 20rpx;">
            <!-- uview2.0 -->
            <!--    <u-loadmore :status="uLoadMoreStatus" :loading-text="uLoadMore.loadingText"
                :loadmore-text="uLoadMore.loadmoreText" :nomore-text="uLoadMore.nomoreText"></u-loadmore> -->
            <uni-load-more :status="uniLoadMoreStatus" :loadText="uniLoadMore.loadText"></uni-load-more>
        </view>

    </view>
</template>

<script>
    /**
     * 本页面提供分页演示
     * @author maybe
     */
    import listMixin from '@/common/mixins/list-mixin.js';
    import {
        getData
    } from './request.js'

    export default {
        mixins: [listMixin],
        components: {},
        data() {
            return {
                /**
                 * url参数
                 */
                query: {},
                /**
                 * 混合配置(list-mixin)
                 */
                mxListConf: {
                    /**
                     * 列表必须为key list的数组
                     */
                    list: [],
                    /**
                     * 后端返回的总数据条数
                     */
                    total: 0,
                    /**
                     * 自定义搜索对象
                     * 该对象会在刷新和搜索的时候自动重置为初始对象
                     * @warn 必须为key为'search'的对象
                     */
                    search: {
                        text: '',
                        arr: [1, 2, 3]
                    }
                },
            };
        },
        onLoad(options) {
            console.log('页面onLoad', options)
            // 缓存url参数
            this.query = options;
        },
        methods: {
            /**
             * 搜索
             */
            onSearch() {
                // 调用混合搜索
                this.mxListSearchData();
            },

            /**
             * 数据请求(没错就是这么少的代码)
             */
            async mxListGetList() {
                // 根据实际情况修改自己修改key 
                let result = await getData({
                    page: this.mxListConf.page, // 传入页码
                    size: this.mxListConf.size, // 传入每页条数
                    ...this.mxListConf.search, // 传入搜索的对象
                    id: this.query.id
                });
                this.mxListConf.total = result.data.total; //必须设置总数
                this.mxListConf.list.push(...result.data.list); // push数据
            }
        }
    };
</script>

<style lang="scss" scoped>
    .page {
        padding: 40rpx 0rpx;
    }

    /*搜索*/
    .search-wrap {
        padding: 30rpx;
    }

    /*列表*/
    .list-wrap {}

    /*正式环境需要删除*/
    .test {

        /*说明*/
        .notice {
            font-size: 30upx;
            padding: 40upx 0;
            border-bottom: 1upx solid #eee;
            text-align: center;
        }

        /*展示上拉加载的数据列表*/
        .news-li {
            font-size: 32upx;
            padding: 32upx;
            border-bottom: 1upx solid #eee;
            // color: $uni;
            color: red;
        }

        .news-li .new-content {
            font-size: 28upx;
            margin-top: 10upx;
            margin-left: 20upx;
            color: #666;
        }
    }
</style>

结语

清晨太阳冉冉升起，又是搬砖的好日子。

By: Maybe QQ: 1013480204