uniapp上拉加载和下拉刷新

 

<view class="goods">
        <goodsList :goodsList="goodsList" />
        <view class="isOver" v-show="flag">-------我是有底线的-------</view>
    </view>

 

import goodsList from '../../components/goods-list/goods-list'
    export default {
        components: {
            goodsList
        },
        data() {
            return {
                goodsList: [],
                pageindex: 1,
                flag: false
            }
        },
        onLoad() {
            this.getHotGoods()
        },
        methods: {

      1.上拉加载 

            //获取商品列表
            async getHotGoods() {
                const res = await this.$myRequest({
                    url: '/api/getgoods?pageindex=' + this.pageindex
                })
                if (res.data.message.length == 0) return this.flag = true    //当传来值长度为0时，返回并显示-------我是有底线的-------
                this.goodsList = [...this.goodsList, ...res.data.message]
            },
        },
        onReachBottom() {     //监听页面滚动到底部
            //根据 getHotGoods函数中的 flag，判断返回的数据的length 小于10表示没有后面的数据了
            if (this.flag) {
                return
            }
            this.getHotGoods()
            this.pageindex++
            console.log('商品列表数据：', this.pageindex)
        }

       

      2.下拉刷新 

          async getHotGoods(callBack) {
                const res = await this.$myRequest({
                    url: '/api/getgoods?pageindex=' + this.pageindex
                })
                if (res.data.message.length == 0) return this.flag = true
                this.goodsList = [...this.goodsList, ...res.data.message]
                callBack && callBack()
            },
      }，

        //下拉刷新
        onPullDownRefresh() {
            this.pageindex=1
            this.goodsList=[]
            this.flag = false
            setTimeout(()=>{
                this.getHotGoods(()=>{
                    uni.stopPullDownRefresh()
                })
            },1000)
        }

    }