小程序scroll-view 实现上拉加载更多下拉刷新功能组件

小程序如果支持自定义导航的话，下拉刷新会被自定义的导航所遮挡，影响美观效果，所以用SCROLL-VIEW 自定义了个上拉加载和下拉刷新功能，在制作过程中，发现代码对安卓和IOS的兼容性不是特别好，所以尽量能不用自定义最好别用。

IOS 在下拉的时候拖动属性moveHandle会在拖动并释放候才执行，导致抖屏，不建议实时插入顶部高度，另参考了部分小程序，发现上拉都未使用动画效果

template

    代码
    <k-scroll id="scroll"  @pulldown="top" @pullup="bom" >
                    <view class="list-p" hover-class="uni-list-cell-hover" v-for="(value,key) in listData" :key="key">
                        <view class="uni-media-list">
                                <image class="uni-media-list-logo j-1" :src="value.cover"></image>
                                <view class="uni-media-list-body">
                                    <view class="uni-media-list-text-top cor-10">{{value.title}}</view>
                                    <view class="uni-media-list-text-bottom">
                                        <text class="cor-11">{{value.author_name}}</text>
                                        <text>{{value.published_at}}</text>
                                    </view>
                                </view>
                        </view>
                    </view>
    </k-scroll>

js

    data() {
        return {
                title:'会员消息',
                listData: [],//动态加载的数据
                last_id: "", // 验证下一页数据的起始字段
                reload: false //判断是否刷新重新加载
            }
    },
    //启动加载
    onLoad() {
        this.page_title(this.title);
        this.getList();
    },
    methods:  Object.assign({
            ...mapMutations(['islogin','setCache','logout']),
            top(){
                this.reload = true;
                this.last_id = "";
                this.getList();
                //----------核心在这里-------------------------
                this.$children[1].stop(); //关闭下拉组件里的值
                //----------核心在这里-------------------------   
            },
            bom(){

                            this.getList();
                            //数据请求完成后需要调用该方法结束loading
            },
            scroll: function(e) {

            },
            getList() {
                            //this.U.y_show();
                            var data = {
                                column: "id,post_id,title,author_name,cover,published_at" //需要段名
                            };
                            if (this.last_id) { //说明已有数据，目前处于上拉加载
                                data.minId = this.last_id;
                                data.time = new Date().getTime() + "";
                                data.pageSize = 10;//
                            }

                            uni.request({
                                url: 'https://unidemo.dcloud.net.cn/api/news',
                                data: data,
                                success: (data) => {
                                    if (data.statusCode == 200) {
                                        let list = this.setTime(data.data);
                                        this.listData = this.reload ? list : this.listData.concat(list);
                                        this.last_id = list[list.length - 1].id;
                                        this.reload = false;
                                         //----------核心在这里-------------------------
                                         this.$nextTick(function(){
                                                this.$children[1].stopLoad();
                                                this.U.n_show();
                                        });
                                         //----------核心在这里-------------------------

                                    }

                                },
                                fail: (data, code) => {
                                    console.log('fail' + JSON.stringify(data));
                                }
                            })

                        },
                        goDetail: function (e) {

                            let detail = {
                                author_name: e.author_name,
                                cover: e.cover,
                                id: e.id,
                                post_id: e.post_id,
                                published_at: e.published_at,
                                title: e.title
                            }

                        },
                        setTime: function (items) {
                            var newItems = [];
                            items.forEach((e) => {
                                newItems.push({
                                    author_name: e.author_name,
                                    cover: e.cover,
                                    id: e.id,
                                    post_id: e.post_id,
                                    published_at: dateUtils.format(e.published_at),
                                    title: e.title
                                });
                            });
                            return newItems;
                        }
            },Page.Fs)