The implementation code of adding small program corner mark and binding the number of shopping carts to update in real time
- 2021-10-13 06:11:26
- OfStack
Firstly, the method of 1 lower corner mark is introduced:
// tabBer Corner marker index Which one does it represent tabber text Represents the content of the corner marker
wx.setTabBarBadge({
index: 2,
text: '1'
})
}
{
wx.removeTabBarBadge({ // Object at the specified location tabbar Logo in upper right corner
index: 2,
})
Next, introduce how to bind the number of shopping carts for real-time update:
Here the words code in App. js, this is because my tabbar bottom is the need to fill the number, so in order to real-time monitoring, I in APP. js did the following operations
// First, define the 1 Methods
timer: false,
scanCart: function () {
// I stuffed all the data in the shopping cart into the cache and named it cart, Any 1 Item modifies the shopping cart behavior, will first take the shopping cart cache, and re-update the shopping cart parameters in the cache
// Shopping cart
var cart = wx.getStorageSync("cart");
// Count the total quantity of shopping cart goods ( What we need is the total quantity, not the specificity. If it is to be specific, it is necessary for Cycle :
for (var index in cart) {
// Note: Here's num Is the value in the data returned by the backend, which is different. Here I use num Display
cartnumber += cart[index].num
}
)
var cartnumber = cart.length; // Quantity in the shopping cart
if (cart.length) { // Judge the number of shopping carts, and leave if the shopping cart is empty else
// tabber Corner marker index Which one does it represent tabber text Represents the content of the corner marker
wx.setTabBarBadge({ // Shopping cart is not empty For the shopping cart tabar Add shopping cart number sign in the upper right corner
index: 2, // Flag Add Location
text: ""+cartnumber + "" // By compiling, put the total number of shopping carts here
})
} else {// Shopping cart is empty
wx.removeTabBarBadge({ // Object at the specified location tabbar Logo in upper right corner
index: 2,
})
}
},
Then write onLaunch in App. js:
var that = this;
// Initialize shopping cart
that.timer = setInterval(function () {
that.scanCart(that)
}, 100);
that.scanCart(that);