更新记录

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.修改一些代码

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

list-mixin

前言

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

功能点

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

暂无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问