How does Mini Program realize the effect of ordering Mini Program shopping cart?

This article mainly explains "how Mini Program can achieve the effect of ordering Mini Program shopping cart". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought slowly and deeply. Let's study and learn how Mini Program can achieve the effect of ordering Mini Program shopping cart.

My first order Mini Program, mainly including the linkage of left and right menus, the addition and subtraction of clicks, the simultaneous addition and subtraction of menus and shopping carts, shopping cart animation, etc., pure front-end implementation

The general functional style is shown in the following figure:

Code block

Main code blocks:

/ / Click the left category to switch the right dish changeRightMenu: function (e) {var classify = e.target.dataset.idbank / get the id var foodList = this.data.foodList; var allFoodList = this.data.allFoodList; var newFoodList = [] of the clicked item. If (classify = = 0) {/ / all options this.setData ({curNav: classify) are selected FoodList: allFoodList})} else {/ / selected other options for (var i in allFoodList) {if (allFoodList [I] .catid = = classify) {newFoodList.push (allFoodList [I])}} this.setData ({/ / curNav item curNav: classify, foodList: newFoodList} is currently displayed on the right menu)}} / / add quantity to shopping cart and menu addCount: function (e) {var id = e.currentTarget.dataset.id [write link content here] (http://download.csdn.net/download/m0_37543652/10019843%20%20%E6%BA%90%E7%A0%81%E4%B8%8B%E8%BD%BD%E5%9C%B0%E5%9D%80) var arr = wx.getStorageSync ('cart') | | []; var f = false For (var i in this.data.foodList) {/ / traverse the menu to find the item clicked, and add 1 if (this.data.foodList [I] .id = = id) {this.data.foodList [I] .menu + = 1 If (arr.length > 0) {for (var j in arr) {/ / traverse the shopping cart to find the item clicked, and add 1 if (arr [j] .id = = id) {arr [j] .menu + = 1; f = true Try {wx.setStorageSync ('cart', arr)} catch (e) {console.log (e)} break;}} if (! F) {arr.push (this.data.foodList [I]) }} else {arr.push (this.data.foodList [I]);} try {wx.setStorageSync ('cart', arr)} catch (e) {console.log (e)} break }} this.setData ({cartList: arr, foodList: this.data.foodList}) this.getTotalPrice ();}, / / define the method to delete the array according to id removeByValue: function (array, val) {for (var I = 0; I < array.length; iArray +) {if (array [I] .id = val) {array.splice (I, 1); break }, / / Shopping cart reduction minusCount: function (e) {var id = e.currentTarget.dataset.id; var arr = wx.getStorageSync ('cart') | | []; for (var i in this.data.foodList) {if (this.data.foodList [I] .id = = id) {this.data.foodList.data-= 1 If (this.data.foodList [I] .room0) {for (var j in arr) {if (arr [j] .id = = id) {arr [j] .lists-= 1; if (arr [j] .lists)