更新记录

1.0.1（2019-07-29）

修复重复请求bug

1.0.0（2019-07-29）

初始化提交

平台兼容性

wsure-load-more

一个优雅的、高复用性的、适合uni-app的分页加载插件 解决了包含分页的页面需要重复写交互逻辑和分页状态等等诸多麻烦，避免代码大量重复。 现在用户配置好了子元素和获取数据的provider方法，以及相关事件，就可以轻松使用

使用方法

1.引入注册

代码示例:

①局部引入

    //局部引入 （需要的页面
    import wsLoadMore from '@/components/wsure-load-more/load-more.vue';
    //记得注册插件
    export default {
        components:{
            wsLoadMore
        },
    }

②全局引入

    //全局引入 （main.js
    import wsLoadMore from './components/wsure-load-more/load-more.vue';
    Vue.component('wsLoadMore',wsLoadMore)

2.页面模板

代码示例:

    <!-- 请自行改写.item，以实现你要的效果-->
    <ws-load-more ref="loadMore" @provider="provider" :pageSize="12">
        <template v-slot:list="{ items }"> <!-- 此处为插槽，只能使用template或其他自定义component -->
            <view class="solid-top" v-for="(item,index) in items" :key="index">
                <!-- 此处为每个元素的样式 -->
                <view class="item"> {{item.name}} </view>

            </view>
        </template>
    </ws-load-more>

3.页面逻辑

代码示例:

    export default {
            data() {
                return {
                    pre:'item',
                    failFlag:false,
                    count:0
                }
            },
            methods: {
                /**核心 只需实现@provider事件
                    入参：e包含两个参数：pageNo和pageSize
                    请求完成后填充数据：this.$refs.loadMore.pushData(res)
                        成功:在获取数据成功后调用this.$refs.loadMore.pushData(res) res为数组，
                        失败:在获取数据失败后调用this.$refs.loadMore.pushData(res) res为null，
                */
                provider(e){
                    console.log(e);
                    var that = this;
                    //模拟网络请求的延迟
                    setTimeout(function () {

                        var res = [
                            {
                                name:'a1'
                            },{
                                name:'a2'
                            },{
                                name:'a3'
                            },{
                                name:'a4'
                            },

                            //......
                        ];
                        //向插件传入当前页数据
                        that.$refs.loadMore.pushData(res);
                    }, 1000);
                }
            },

            //#ifndef H5
            onLoad() {
                //如果你是`非H5`平台（app-plus或者小程序），按自己习用onLoad就好了
                console.log("onLoad")
                this.$refs.loadMore.reLoadData()
            },
            //#endif

            //#ifdef H5
            onReady(){
                //如果是H5，请一定使用onReady方法初次加载数据，否则不会触发
                console.log("onReady")
                this.$refs.loadMore.reLoadData()
            },
            //#endif

            onPullDownRefresh() {
                console.log("onPullDownRefresh")
                this.$refs.loadMore.pullDownRefresh()
            },
            onReachBottom() {
                console.log("onReachBottom")
                this.$refs.loadMore.reachBottom()
            }
        }

4.pages.json配置

代码示例:

配置style的enablePullDownRefresh:true，以此开启下拉刷新

{
"pages": [ 
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "wsure-loadmore",
"enablePullDownRefresh": true   
}
}
]
}

参数

@provider