當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  編程技術(shù) >  正文

小程序角標(biāo)的添加及綁定購(gòu)物車數(shù)量進(jìn)行實(shí)時(shí)更新的實(shí)現(xiàn)代碼

 2020-12-10 16:23  來(lái)源: 腳本之家   我來(lái)投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過(guò)

這篇文章主要介紹了小程序角標(biāo)的添加及綁定購(gòu)物車數(shù)量進(jìn)行實(shí)時(shí)更新的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

首先介紹一下角標(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,
})

接下來(lái)介紹怎么實(shí)現(xiàn)綁定購(gòu)物車數(shù)量進(jìn)行實(shí)時(shí)更新:

這里的話代碼在App.js 里,這是因?yàn)槲业膖abbar底部的是需要填充數(shù)量,所以為了實(shí)時(shí)監(jiān)聽(tīng),我在APP.js里面做了如下操作

//首先定義了一個(gè)方法
timer: false,
scanCart: function () {
//我把購(gòu)物車?yán)锩娴臄?shù)據(jù)都塞到了緩存里,取名cart,任何一項(xiàng)修改購(gòu)物車的行為,都會(huì)先取購(gòu)物車的緩存,在重新更新緩存里的購(gòu)物車參數(shù)
//購(gòu)物車
var cart = wx.getStorageSync("cart");
//統(tǒng)計(jì)購(gòu)物車商品的總數(shù)量(我們需要的是總數(shù)量而不是具體的,如果要具體的話需要for循環(huán):
for (var index in cart) {
//注意:這里的num是后端返回的數(shù)據(jù)里的值,各不相同,這里我用num展示
cartnumber += cart[index].num
}

)
var cartnumber = cart.length; //購(gòu)物車?yán)锏臄?shù)量



if (cart.length) { //判斷購(gòu)物車的數(shù)量個(gè)數(shù),購(gòu)物車如果為空就走else
// tabber角標(biāo) index代表的是第幾個(gè)tabber text表示角標(biāo)內(nèi)容

wx.setTabBarBadge({ //購(gòu)物車不為空 ,給購(gòu)物車的tabar右上角添加購(gòu)物車數(shù)量標(biāo)志
index: 2, //標(biāo)志添加位置
text: ""+cartnumber + "" //通過(guò)編譯,將購(gòu)物車總數(shù)量放到這里
})
} else {//購(gòu)物車為空
wx.removeTabBarBadge({ //移除指定位置的tabbar右上角的標(biāo)志
index: 2,
})
}
},

然后在App.js 里的onLaunch寫(xiě)入:

var that = this;
//初始化購(gòu)物車
that.timer = setInterval(function () {
that.scanCart(that)
}, 100);
that.scanCart(that);

到此這篇關(guān)于小程序角標(biāo)的添加及綁定購(gòu)物車數(shù)量進(jìn)行實(shí)時(shí)更新的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)小程序角標(biāo)的添加內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

來(lái)源:腳本之家

鏈接:https://www.jb51.net/article/201541.htm

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)文章

熱門(mén)排行

信息推薦