38-实现上拉加载更过和下拉刷新

<template>
    <view class='goods_list'>  <!--加入灰色的背景-->
        <goods-list :goods="goods"></goods-list>
        <view class='isOver' v-if='flag'>---我是有底线的---</view>
    </view>
</template>
<script>
    import goodsList from '../../components/goods-list/goods_list.vue'
    export default {
        data() {
            return {
                pageindex:1,
                goods:[],
                flag:false
            };
        },
        components:{
            'goods-list':goodsList
        },
        methods:{
            //获取商品列表数据
            async getGoodsList(callback){
                const res = await this.$myRequest({
                    url : '/api/getgoods?pageindex='+this.pageindex
                })
                //this.goods = res.data.message
                this.goods = [...this.goods,...res.data.message]
                callback && callback()  //如果有这个回调函数就调用
            }
        },
        onLoad(){
            this.getGoodsList()
        },
        //下拉刷新
        onReachBottom() {   //触底就会触发这个函数
            console.log('触底反弹')
            if(this.goods.length<10*(this.pageindex-1)){
                return this.flag = true        
                    }
            this.pageindex++    //页码书进行加1
            this.getGoodsList()
        },
        onPullDownRefresh() {
            console.log('下拉刷新了')
            this.pageindex = 1
            this.goods= []
            this.flag = false
            setTimeout(()=>{
                this.getGoodsList(()=>{
                    uni.stopPullDownRefresh()
                })
            },1000)
        }
    }
</script>
<style lang="scss">
.goods_list{
    background: #eee;
}
.isOver{
    width:100%;
    height:50px;
    line-height: 50px;
    text-align: center;
    font-size:28px;
}
</style>

注意里面回调函数的应用！认真看代码