項目分享二：APP 小紅點中數字的處理

小紅點，是 APP 中最多見的一個功能，咱們先來看一下面的案例，下圖中，待評價的商品有 2 個，點擊「評價曬單」按鈕進行評價後，那麼待評價數量應該變成 1，那麼這個功能是如何去實現的呢？

通常來講，實現的方法有三種：

1、刷新整個頁面的數據

就是說，每顯示一次，都從新從服務端把數據拉下來，這種方法雖然簡單，可是，加大了服務端的負荷，而且因爲要整頁刷新，用戶體驗很差。

2、利用事件實現

好比說：增長一個名爲 評價曬單 的事件，我的中心頁面監聽這個事件，而在用戶進行評價曬單操做時，服務端返回待評價數量，而後客戶端觸發該事件，而且把數值傳遞過去。

這樣作雖然也能較好地完成。可是有點煩索，要定義事件，監聽事件，並且還要觸發事件。

3、使用全局變量

使用一個名爲「待評價數」的變量，當用進行評價時，將服務端返回的數據（待評價數）直接寫入該變量便可。本項目使用的就是這種方法。簡單好用，目前看來沒有任何反作用。

4、關鍵代碼

var model = {
        notPaidCount: account.orderInfo.notPaidCount,
        toReceiveCount: account.orderInfo.toReceiveCount,
        evaluateCount: account.orderInfo.evaluateCount,
        nickName: member.currentUserInfo.NickName,
}
page.viewChanged.add(() => ko.applyBindings(model, page.nodes().content));

上面段代碼是定義一個 model，而且把該 model 綁定到頁面的結點。其中的 evaluateCount 就是待評價數，它是一個全局變量。下面這段代碼是調用服務端的服務，完成後，將服務端返回的待評價數直接寫入到全局變量。

 services.callMethod(site.config.serviceUrl, 'Product/EvaluateProduct', data).done((value) => {
            this.orderInfo.evaluateCount(value);
        })

5、觸類旁通

其實不少須要局部刷新的地方，均可以考慮採用這種方法。好比說：用戶上傳頭象，修更名稱，購物車中商品的數量等等。

6、項目代碼

完整的項目代碼託管在 github 上，https://github.com/ansiboy/ChiTuStore

 

 

項目分享一：在項目中使用 IScroll 所碰到的那些坑