小程序角標的添加及綁定購物車數(shù)量進行實時更新的實現(xiàn)代碼
更新時間:2020年12月07日 09:25:30 作者:code Dream
這篇文章主要介紹了小程序角標的添加及綁定購物車數(shù)量進行實時更新的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
首先介紹一下角標的方法:
// tabBer角標 index代表的是第幾個tabber text表示角標內(nèi)容
wx.setTabBarBadge({
index: 2,
text: '1'
})
}
{
wx.removeTabBarBadge({ //移除指定位置的tabbar右上角的標志
index: 2,
})
接下來介紹怎么實現(xiàn)綁定購物車數(shù)量進行實時更新:
這里的話代碼在App.js里,這是因為我的tabbar底部的是需要填充數(shù)量,所以為了實時監(jiān)聽,我在APP.js里面做了如下操作
//首先定義了一個方法
timer: false,
scanCart: function () {
//我把購物車里面的數(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; //購物車里的數(shù)量
if (cart.length) { //判斷購物車的數(shù)量個數(shù),購物車如果為空就走else
// tabber角標 index代表的是第幾個tabber text表示角標內(nèi)容
wx.setTabBarBadge({ //購物車不為空 ,給購物車的tabar右上角添加購物車數(shù)量標志
index: 2, //標志添加位置
text: ""+cartnumber + "" //通過編譯,將購物車總數(shù)量放到這里
})
} else {//購物車為空
wx.removeTabBarBadge({ //移除指定位置的tabbar右上角的標志
index: 2,
})
}
},
然后在App.js里的onLaunch寫入:
var that = this;
//初始化購物車
that.timer = setInterval(function () {
that.scanCart(that)
}, 100);
that.scanCart(that);
到此這篇關于小程序角標的添加及綁定購物車數(shù)量進行實時更新的實現(xiàn)代碼的文章就介紹到這了,更多相關小程序角標的添加內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript實現(xiàn)動態(tài)高度過渡的3種方式總結
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)動態(tài)高度過渡的3種方式,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
javascript實現(xiàn)的基于金山詞霸網(wǎng)絡翻譯的代碼
下面的這段代碼是基于金山詞霸網(wǎng)絡翻譯提供的接口,遠程調用文件,可以作為一個自定義的在線查詢工具。2010-01-01

