tabbar+下拉刷新

在最近的微信小程序開發中，遇到一個比較坑的界面開發，說坑并不是因為它難，而是這其中包括了太多的開發時所要填的坑了，今天準備將這些填完的小坑一個個刨出來仔細啃啃，做一個demo分享一下。

需求分析

簡單梳理一下需求：1.tabbar 需要用 fixed來跟隨 2.需要有上拉刷新，下拉加載的功能

需求很簡單，看起來一個個都不是很困難，但其中隱約的藏著許多個小坑洼，需要一個個仔細的來填上。首先第一個需求，position:fixed; 直接實現，不存在任何困難。

實現方法

緊接著面對上拉刷新、下拉加載這個功能，老生常談，主要有兩個實現的方式：
1.scroll-view的上下監聽函數，在觸頂和觸底時分別執行上拉刷新和下拉刷新機制。
2.微信api自帶的onReachBottom 和 onPullDownFresh 兩個函數，分別為觸底執行和下拉刷新。

先來介紹一下兩種方法：
1.利用scroll-view 來放置列表展示頁，將產品列表貼在scroll-view上，利用下滑屬性可以將產品展示在其中。在scroll-view觸底時， 綁定bindtaplower 這個函數將會被觸發，達到“下拉刷新”的效果。
2.利用page標簽自帶的onReachBottom 來達到下拉加載，上拉刷新。兩個api屬于自帶的api，而這個的上拉刷新也自帶了一個刷新動畫。

兩種方法均有其特點和優異之處。從個人的開發喜好來說，在單列表中，第二種方式，即OnReachBottom 和 onPullDownFresh 的方式是優于第一種方式的。為什么呢？因為它自帶了一個下拉刷新的動畫。而用scroll-view 的上拉刷新是不帶這個動畫的。所以誰更加優秀不言而喻啦。

那么，我們應該如何合適的使用這兩種方案？

微信小程序是一種很簡單的前端程序，但是它其中蘊含了許多的大大小小的坑。比如：在scroll-view 的碰邊函數上，會出現碰觸執行多次的問題，即觸底執行的判定過于多次，導致其瘋狂觸發函數。

面臨這樣的bug，我的第一想法是給他們上個鎖。每當函數執行時將鎖關上，在函數之行結束之時再將鎖打開。這樣就可以將函數重復執行的問題解決了。

·上拉加載的函數·

upper: function() {
    var that = this
    var timestamp = Date.parse(new Date()) / 1000;
    var lastTime = this.data.lastLoadTime
    if (timestamp - lastTime < 5) {
        console.log('太快了')
    } else {
        that.setData({ lastLoadTime: timestamp })
        if (this.data.pullUpAllow) {
            console.log('刷新啦')
            that.setData({
                pullUpAllow: false
            })
            wx.showNavigationBarLoading() //在標題欄中顯示加載
            console.log(that.data.classidnow)
            wx.request({
                url: '…',//這里放置的是接口的地址
                method: 'POST',
                data: {
                    shopid: getApp().globalData.shopid,
                    classid: that.data.classidnow,
                    userid: getApp().globalData.userid
                },
                header: {
                    'content-type': 'application/json' // 默認值
                },
                success: function(res) {
                    console.log(res)
                    if (res.data.data.length != 0) {
                        let shoppingDetail = res.data.data
                        that.setData({
                            shopping: shoppingDetail,
                            showNowData: false
                        })
                        console.log(that.data.shopping)
                    } else {
                        that.setData({
                            shopping: shoppingDetail,
                            showNowData: true
                        })
                    }
                },
                complete: function() {
                    wx.hideNavigationBarLoading() //完成停止加載
                    wx.stopPullDownRefresh() //停止下拉刷新
                    setInterval(() => {
                        that.setData({
                            pullUpAllow: true
                        })
                    }, 1000)
                }
            })
        }
    }
}

雖然可以解決下拉刷新觸發過多的問題，但因為上拉刷新的硬傷，所以我認為，在能使用onReachBottom的情況下，不要去使用scroll-view來寫。因為上拉加載時，用
Scroll-viewl動畫提示用戶在下拉刷新時，用的是showNavigationBarLoading()這個api，他做到的是在標題上加入一個旋轉的小動畫。但是使用這個api時，會產生的一個問題就是，如果在上拉加載時不放手時，還是會瘋狂觸發上拉刷新的bug，這是后標題會瘋狂鬼畜的抖動。這時候，我想到的解決方案是給上拉再次加入一個時間鎖。在三秒之內，再次觸發刷新時，禁止它的觸發。而自帶的onReachBottom 將不會再觸發這類問題，因為它要真真實實的上拉，所以綜上所述，如果能用onReachBottom ，辣就不要用scroll-view來寫上拉刷新啦，因為真的沒那么好用的。

如果你以為這就結束了？

 

上一段說了，如果如果能用onReachBottom ，就用這個，那么什么情況下不能用呢？這就關系到一開始說的需求了，需求上是關系到一個需要position:fixed的屬性的。那么，我們就要面臨一個問題了。如果用的是view 標簽，在拉到1/2 時，做tab切換，時候就面臨一個問題：它的切換并不會切到頂部，而出現的也是在刷新之后的1/2處，這個體驗非常不人性化。那么，在面對需要置頂的情況下，view的使用就會面臨一個瓶頸了。如何讓view置頂？這是個問題。

我的解決方案是：scroll-view 在每次切換時，讓scrollTop行內標簽歸零，這樣就可以讓每次切換置頂了。而因為scrolltop一開始就為0，第一次的上拉刷新是不會觸發的。在這樣的場景下，目前還是用scroll-view 來的更為簡便。

最終樣式

 

 

最后：

這是最近開發的一個tabbar + 下拉刷新的demo，如果有需要，就到github里來取吧，如果可以的話記得給個小星星喲~