下拉刷新的實現步驟（代碼解釋詳細，通俗易懂）

1.pages.json文件中，globalStyle里面開啟下拉刷新，屬性為true

{

    "pages": [

        {

        "path": "pages/index/index"

        },

        {

            "path": "pages/search/search"

        },

        {

            "path": "pages/cart/cart"

        },

        {

            "path": "pages/member/member"

        }

        ,{

            "path" : "pages/goods/goods",

            "style" :                                                                                    

            {

                "navigationBarTitleText": ""

                // "enablePullDownRefresh": true

            }

            

        }

    ],

    "globalStyle": {

        "navigationBarTextStyle": "white",

        "navigationBarTitleText": "多抓魚",

        "navigationBarBackgroundColor": "#003153",

        "enablePullDownRefresh": true,

        "backgroundColor": "#F8F8F8",

        "app-plus": {

            "background": "#efeff4"

        }

    },

    "tabBar": {

        //列表的順序決定圖標的順序

        "list": [

            {

                "pagePath":"pages/index/index",

                "text":"首頁",

                "iconPath":"static/icon/home.png",

                "selectedIconPath":"static/icon/home-active.png"

            },

            {

                "pagePath":"pages/search/search",

                "text":"搜索",

                "iconPath":"static/icon/news.png",

                "selectedIconPath":"static/icon/news-active.png"

            },

            {

                "pagePath":"pages/cart/cart",

                "text":"購物車",

                "iconPath":"static/icon/cart.png",

                "selectedIconPath":"static/icon/cart-active.png"

            },

            {

                "pagePath":"pages/member/member",

                "text":"會員",

                "iconPath":"static/icon/member.png",

                "selectedIconPath":"static/icon/member-active.png"

            }

        ]


    }


}

2.onPullDownRefresh是頁面周期函數，下拉操作會觸發該函數

goods.vue中

methods: {

            async getGoodsInfo(callback){

                const res = await this.$myRequest({

                    url: "/goods/search?pageIndex="+this.pageIndex,

                    method: 'get',

                    

                })

                //對象擴展運算符，將兩個數組合并成一個

                this.goods = [...this.goods,...res.data.message.goods];

                this.total = res.data.message.total;

                this.pagenum = res.data.message.pagenum;

                console.log("total",this.goods.length)

                //傳入回調函數就執行

                callback && callback()

            }

        },

onPullDownRefresh() {

                    console.log('下拉刷新了')

                    this.pageindex = 1

                    this.goods = []

                    this.flag = false

                    setTimeout(()=>{

                      this.getGoodsInfo(()=>{

                            uni.stopPullDownRefresh()

                        })    

                    },1000)

        }

上拉加載

頁面周期函數，頁面拉到底自動觸發。

methods: {

            async getGoodsInfo(callback){

                const res = await this.$myRequest({

                    url: "/goods/search?pageIndex="+this.pageIndex,

                    method: 'get',

                    

                })

                this.goods = [...this.goods,...res.data.message.goods];

                this.total = res.data.message.total;

                this.pagenum = res.data.message.pagenum;

                console.log("total",this.goods.length)

                callback && callback()

            }

        },

onReachBottom() {

            if(this.goods.lenth < 20*this.pageIndex){

                return this.flag = true;    

            }

            this.pageIndex++;

            this.getGoodsInfo();

        },