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


小紅點,是 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 所碰到的那些坑


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM