微信小程序：完成一個(gè)tabbar+下拉刷新組件，需要經(jīng)歷什么坑

發(fā)布時(shí)間：2018-04-25 10:50 所屬欄目：小程序開發(fā)教程

tabbar+下拉刷新

在最近的微信小程序開發(fā)中，遇到一個(gè)比較坑的界面開發(fā)，說坑并不是因?yàn)樗y，而是這其中包括了太多的開發(fā)時(shí)所要填的坑了，今天準(zhǔn)備將這些填完的小坑一個(gè)個(gè)刨出來仔細(xì)啃啃，做一個(gè)demo分享一下。

需求分析

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

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

實(shí)現(xiàn)方法

緊接著面對(duì)上拉刷新、下拉加載這個(gè)功能，老生常談，主要有兩個(gè)實(shí)現(xiàn)的方式：
1.scroll-view的上下監(jiān)聽函數(shù)，在觸頂和觸底時(shí)分別執(zhí)行上拉刷新和下拉刷新機(jī)制。
2.微信api自帶的onReachBottom 和 onPullDownFresh 兩個(gè)函數(shù)，分別為觸底執(zhí)行和下拉刷新。

先來介紹一下兩種方法：
1.利用scroll-view 來放置列表展示頁，將產(chǎn)品列表貼在scroll-view上，利用下滑屬性可以將產(chǎn)品展示在其中。在scroll-view觸底時(shí)，綁定bindtaplower 這個(gè)函數(shù)將會(huì)被觸發(fā)，達(dá)到“下拉刷新”的效果。
2.利用page標(biāo)簽自帶的onReachBottom 來達(dá)到下拉加載，上拉刷新。兩個(gè)api屬于自帶的api，而這個(gè)的上拉刷新也自帶了一個(gè)刷新動(dòng)畫。

兩種方法均有其特點(diǎn)和優(yōu)異之處。從個(gè)人的開發(fā)喜好來說，在單列表中，第二種方式，即OnReachBottom 和 onPullDownFresh 的方式是優(yōu)于第一種方式的。為什么呢？因?yàn)樗詭Я艘粋€(gè)下拉刷新的動(dòng)畫。而用scroll-view 的上拉刷新是不帶這個(gè)動(dòng)畫的。所以誰更加優(yōu)秀不言而喻啦。

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

微信小程序是一種很簡單的前端程序，但是它其中蘊(yùn)含了許多的大大小小的坑。比如：在scroll-view 的碰邊函數(shù)上，會(huì)出現(xiàn)碰觸執(zhí)行多次的問題，即觸底執(zhí)行的判定過于多次，導(dǎo)致其瘋狂觸發(fā)函數(shù)。

面臨這樣的bug，我的第一想法是給他們上個(gè)鎖。每當(dāng)函數(shù)執(zhí)行時(shí)將鎖關(guān)上，在函數(shù)之行結(jié)束之時(shí)再將鎖打開。這樣就可以將函數(shù)重復(fù)執(zhí)行的問題解決了。

·上拉加載的函數(shù)·

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() //在標(biāo)題欄中顯示加載
            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' // 默認(rèn)值
                },
                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)
                }
            })
        }
    }
}

雖然可以解決下拉刷新觸發(fā)過多的問題，但因?yàn)樯侠⑿碌挠矀晕艺J(rèn)為，在能使用onReachBottom的情況下，不要去使用scroll-view來寫。因?yàn)樯侠虞d時(shí)，用
Scroll-viewl動(dòng)畫提示用戶在下拉刷新時(shí)，用的是showNavigationBarLoading()這個(gè)api，他做到的是在標(biāo)題上加入一個(gè)旋轉(zhuǎn)的小動(dòng)畫。但是使用這個(gè)api時(shí)，會(huì)產(chǎn)生的一個(gè)問題就是，如果在上拉加載時(shí)不放手時(shí)，還是會(huì)瘋狂觸發(fā)上拉刷新的bug，這是后標(biāo)題會(huì)瘋狂鬼畜的抖動(dòng)。這時(shí)候，我想到的解決方案是給上拉再次加入一個(gè)時(shí)間鎖。在三秒之內(nèi)，再次觸發(fā)刷新時(shí)，禁止它的觸發(fā)。而自帶的onReachBottom 將不會(huì)再觸發(fā)這類問題，因?yàn)樗嬲鎸?shí)實(shí)的上拉，所以綜上所述，如果能用onReachBottom ，辣就不要用scroll-view來寫上拉刷新啦，因?yàn)檎娴臎]那么好用的。

如果你以為這就結(jié)束了？

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

我的解決方案是：scroll-view 在每次切換時(shí)，讓scrollTop行內(nèi)標(biāo)簽歸零，這樣就可以讓每次切換置頂了。而因?yàn)閟crolltop一開始就為0，第一次的上拉刷新是不會(huì)觸發(fā)的。在這樣的場景下，目前還是用scroll-view 來的更為簡便。