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);

Related articles: