專案分享二:APP 小紅點中數字的處理

麥舒發表於2015-12-15

小紅點,是 APP 中最常見的一個功能,我們先來看一下面的案例,下圖中,待評價的商品有 2 個,點選“評價曬單”按鈕進行評價後,那麼待評價數量應該變成 1,那麼這個功能是如何去實現的呢?

一般來說,實現的方法有三種:

一、重新整理整個頁面的資料

就是說,每顯示一次,都重新從服務端把資料拉下來,這種方法雖然簡單,但是,加大了服務端的負荷,並且由於要整頁重新整理,使用者體驗不好。

二、利用事件實現

比如說:增加一個名為 評價曬單 的事件,個人中心頁面監聽這個事件,而在使用者進行評價曬單操作時,服務端返回待評價數量,然後客戶端觸發該事件,並且把數值傳遞過去。

這樣做雖然也能較好地完成。但是有點煩索,要定義事件,監聽事件,而且還要觸發事件。

三、使用全域性變數

使用一個名為“待評價數”的變數,當用進行評價時,將服務端返回的資料(待評價數)直接寫入該變數即可。本專案使用的就是這種方法。簡單好用,目前看來沒有任何副作用。

四、關鍵程式碼

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);
        })

五、舉一反三

其實很多需要區域性重新整理的地方,都可以考慮採用這種方法。比如說:使用者上傳頭象,修改名稱,購物車中商品的數量等等。

六、專案程式碼

完整的專案程式碼託管在 github 上,https://github.com/ansiboy/ChiTuStore

 

 

專案分享一:在專案中使用 IScroll 所碰到的那些坑

相關文章