小程序角標(biāo)的添加及綁定購物車數(shù)量進行實時更新的實現(xiàn)代碼
更新時間：2020年12月07日 09:25:30 作者：code Dream
這篇文章主要介紹了小程序角標(biāo)的添加及綁定購物車數(shù)量進行實時更新的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
首先介紹一下角標(biāo)的方法：
// tabBer角標(biāo) index代表的是第幾個tabber text表示角標(biāo)內(nèi)容
wx.setTabBarBadge({
index: 2,
text: '1'
})
}
{
wx.removeTabBarBadge({ //移除指定位置的tabbar右上角的標(biāo)志
index: 2,
})
接下來介紹怎么實現(xiàn)綁定購物車數(shù)量進行實時更新：
這里的話代碼在App.js里，這是因為我的tabbar底部的是需要填充數(shù)量，所以為了實時監(jiān)聽，我在APP.js里面做了如下操作
//首先定義了一個方法
timer: false,
scanCart: function () {
//我把購物車?yán)锩娴臄?shù)據(jù)都塞到了緩存里，取名cart,任何一項修改購物車的行為，都會先取購物車的緩存，在重新更新緩存里的購物車參數(shù)
//購物車
var cart = wx.getStorageSync("cart");
//統(tǒng)計購物車商品的總數(shù)量(我們需要的是總數(shù)量而不是具體的，如果要具體的話需要for循環(huán):
for (var index in cart) {
//注意：這里的num是后端返回的數(shù)據(jù)里的值，各不相同，這里我用num展示
cartnumber += cart[index].num
}
)
var cartnumber = cart.length; //購物車?yán)锏臄?shù)量
if (cart.length) { //判斷購物車的數(shù)量個數(shù)，購物車如果為空就走else
// tabber角標(biāo) index代表的是第幾個tabber text表示角標(biāo)內(nèi)容
wx.setTabBarBadge({ //購物車不為空 ，給購物車的tabar右上角添加購物車數(shù)量標(biāo)志
index: 2, //標(biāo)志添加位置
text: ""+cartnumber + "" //通過編譯，將購物車總數(shù)量放到這里
})
} else {//購物車為空
wx.removeTabBarBadge({ //移除指定位置的tabbar右上角的標(biāo)志
index: 2,
})
}
},
然后在App.js里的onLaunch寫入：
var that = this;
//初始化購物車
that.timer = setInterval(function () {
that.scanCart(that)
}, 100);
that.scanCart(that);
到此這篇關(guān)于小程序角標(biāo)的添加及綁定購物車數(shù)量進行實時更新的實現(xiàn)代碼的文章就介紹到這了,更多相關(guān)小程序角標(biāo)的添加內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了移動端手指放大縮小插件與js源碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
小程序webView實現(xiàn)小程序內(nèi)嵌H5頁面的全過程
在微信小程序中內(nèi)嵌H5頁面是一種常見的需求,因為H5頁面具有靈活性和跨平臺性,可以彌補小程序原生代碼的不足,這篇文章主要給大家介紹了關(guān)于小程序webView實現(xiàn)小程序內(nèi)嵌H5頁面的相關(guān)資料,需要的朋友可以參考下2024-07-07
javascript阻止事件冒泡和瀏覽器的默認(rèn)行為
本篇文章主要介紹了javascript阻止事件冒泡和瀏覽器的默認(rèn)行為。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了CommonJS的模塊加載，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹的是如何利用fecha進行JS日期處理，在日常項目中，經(jīng)常會碰到日期處理的需求，這種需求千奇百怪，而且往往經(jīng)常變化。雖然js提供了原生的Date方法供我們選擇，但一些復(fù)雜的日期時間處理起來往往力不從心。下面通過這篇文章來一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11
下面小編就為大家?guī)硪黄猨s 簡易版滾動條實例(適用于移動端H5開發(fā))。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
Option 對象代表 HTML 表單中下拉列表中的一個選項。在 HTML 表單中 <option> 標(biāo)簽每出現(xiàn)一次，一個 Option 對象就會被創(chuàng)建。您可通過表單的 elements[] 數(shù)組訪問一個 Option 對象，或者通過使用 document.getElementById()。2015-05-05
Apollo 是一個廣泛使用的 JavaScript 第三方庫,主要用于構(gòu)建與 GraphQL API 交互的應(yīng)用程序,下面就跟隨小編一起來學(xué)習(xí)一下它的具體應(yīng)用吧2024-02-02
淺談SpringMVC中post checkbox 多選框value的值(隱藏域方式)
下面小編就為大家分享一篇淺談SpringMVC中post checkbox 多選框value的值(隱藏域方式)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要簡單介紹了Javascript中的Function與Object的關(guān)系，并附上示例分析，對于我們更好的理解Javascript中的Function與Object的關(guān)系很有幫助，有需要的小伙伴參考下。2015-01-01