小程序角標(biāo)的添加及綁定購物車數(shù)量進(jìn)行實(shí)時(shí)更新的實(shí)現(xiàn)代碼
首先介紹一下角標(biāo)的方法:
// tabBer角標(biāo) index代表的是第幾個(gè)tabber text表示角標(biāo)內(nèi)容
wx.setTabBarBadge({
index: 2,
text: '1'
})
}
{
wx.removeTabBarBadge({ //移除指定位置的tabbar右上角的標(biāo)志
index: 2,
})
接下來介紹怎么實(shí)現(xiàn)綁定購物車數(shù)量進(jìn)行實(shí)時(shí)更新:
這里的話代碼在App.js里,這是因?yàn)槲业膖abbar底部的是需要填充數(shù)量,所以為了實(shí)時(shí)監(jiān)聽,我在APP.js里面做了如下操作
//首先定義了一個(gè)方法
timer: false,
scanCart: function () {
//我把購物車?yán)锩娴臄?shù)據(jù)都塞到了緩存里,取名cart,任何一項(xiàng)修改購物車的行為,都會(huì)先取購物車的緩存,在重新更新緩存里的購物車參數(shù)
//購物車
var cart = wx.getStorageSync("cart");
//統(tǒng)計(jì)購物車商品的總數(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ù)量個(gè)數(shù),購物車如果為空就走else
// tabber角標(biāo) index代表的是第幾個(gè)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ù)量進(jìn)行實(shí)時(shí)更新的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)小程序角標(biāo)的添加內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實(shí)現(xiàn)動(dòng)態(tài)高度過渡的3種方式總結(jié)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)高度過渡的3種方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
使用Fetch API時(shí)獲取404錯(cuò)誤的解決方案
在現(xiàn)代Web開發(fā)中,Fetch API 是用于執(zhí)行網(wǎng)絡(luò)請求的主要工具之一,它提供了一種基于Promise的簡潔語法,使得異步操作更加直觀和易于管理,本文將詳細(xì)探討在使用Fetch API時(shí)獲取404錯(cuò)誤的原因、如何檢測和處理這些錯(cuò)誤,以及最佳實(shí)踐,需要的朋友可以參考下2024-12-12
javascript實(shí)現(xiàn)的基于金山詞霸網(wǎng)絡(luò)翻譯的代碼
下面的這段代碼是基于金山詞霸網(wǎng)絡(luò)翻譯提供的接口,遠(yuǎn)程調(diào)用文件,可以作為一個(gè)自定義的在線查詢工具。2010-01-01
一文學(xué)會(huì)JavaScript如何手寫防抖節(jié)流
其實(shí)防抖和節(jié)流不僅僅在面試中會(huì)讓大家手寫,在實(shí)際項(xiàng)目中也可以起到性能優(yōu)化的作用,所以還是很有必要掌握的。這篇文章就帶大家徹底學(xué)會(huì)JavaScript手寫防抖節(jié)流,希望對(duì)大家有所幫助2022-11-11

