Shulou(Shulou.com)06/01 Report--

This article will explain in detail how Mini Program realizes the shopping cart function of the mall. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Layout Analysis:

First a list main box, followed by an item box, this is a must.

Then divide the item into the picture on the left and the description on the right (the item box uses a horizontal elastic box)

The description on the right is divided into upper and lower parts (the box on the right uses a longitudinal elastic box)

The following price shopping cart section (the following price shopping cart part also uses a horizontal elastic box, with justify-content: space-between; in the middle to fill in the blank)

Index.wxml:

More items list

{{item.name}} ¥{{item.price}}

Index.wxss:

[css] view plain copy/**index.wxss**/ page {height: 100%;} .container {background: # f5f5f5;} .tit {display: flex; flex-direction: row; justify-content: space-between; height: 30px; position: relative;} .tit:: before {content:''; background: # ffcc00; width:5px; height: 100%; position: absolute; left: 0; top: 0 } .title _ val {padding: 0 15px; font-size: 14px; color: # 555; line-height: 30px;} .more {font-size: 12px; line-height: 30px; color: # 999; padding: 0 5px 0 0;} .goodslist {background: # fff; display: flex; flex-direction: column;} .title {display: flex; flex-direction: row; border-bottom: 1px solid # ddd }. Good-img {padding: 5px; width: 80px; height: 80px;}. Good-cont {display: flex; flex: 1; flex-direction: column; font-size: 14px;} .goods-navigator {display: flex; flex: 1; flex-direction: column; justify-content: center;}. Good-name {display: flex; flex: 1; flex-direction: column; color: # 555 Justify-content: center;}. Good-price {display: flex; flex: 1; flex-direction: row; justify-content: space-between; color:#e4393c; font-weight: 600;} .cart {width: 40px; height: 40px; padding-right: 10px;}

Index.js:

In the data part, in general, the access interface is used to obtain data, and network access is not used here. In order to simplify demo, a group of data is directly placed in the data object. Students can write their own background interfaces according to their data structures.

[javascript] view plain copyPage ({data: {goodslist: [{id: "001", imgUrl: "https://img5.imgtn.bdimg.com/it/u=2906541843,1492984080&fm=23&gp=0.jpg", name:" Women's T-shirt long style and large skirt New style in Spring and Summer ", price:" 65.00 "} {id: "002", imgUrl: "https://img4.imgtn.bdimg.com/it/u=1004404590,1607956492&fm=23&gp=0.jpg", name:" Huoliang Spring and Autumn Young Men's T-shirts with round necks ", price:" 68.00 "}, {id:" 003 " ImgUrl: "https://img1.imgtn.bdimg.com/it/u=2305064940,3470659889&fm=23&gp=0.jpg", name:" New three-dimensional hanging neck t-shirt Women's short-sleeved large size loose striped V-neck blouse looks thin and casual spring and summer ", price:" 86.00 "}, {id:" 004 " ImgUrl: "https://img4.imgtn.bdimg.com/it/u=3986819380,1610061022&fm=23&gp=0.jpg", name:" Young Men's Sportswear in Spring, price: "119.00"}, {id: "005" ImgUrl: "https://img1.imgtn.bdimg.com/it/u=3583238552,3525141111&fm=23&gp=0.jpg", name:" Fashion letter triangle breasted t-shirt, women's bright silk large size loose irregular spring and summer tide ", price:" 69.00 "}, {id:" 006 " ImgUrl: "https://img2.imgtn.bdimg.com/it/u=1167272381,3361826143&fm=23&gp=0.jpg", name:" New three-dimensional hanging neck t-shirt short-sleeved large size loose striped V-neck blouse looks thin and casual spring and summer ", price:" 86.00 "}, {id:" 007 " ImgUrl: "https://img0.imgtn.bdimg.com/it/u=789486313,2033571593&fm=23&gp=0.jpg", name:" Fashion letter triangle breasted t-shirt, women's bright silk large size loose irregular spring and summer tide ", price:" 119.00 "}, {id:" 008 " ImgUrl: "https://img2.imgtn.bdimg.com/it/u=3314044863,3966877419&fm=23&gp=0.jpg", name:" Young Men's Sportswear in Spring, price: "69.00"},]} / / add shopping cart addcart:function (e) {this.setData ({toastHidden:false}) / / iterate through the list and shopping cart list for (var i in this.data.goodslist) {/ / the id of one of the item items in the list = = Click the id passed by the event. The item if (this.data.goodslist.id = = e.target.id) {/ / adds a count element with a value of 1 to the current item of the goodsList array, which is used to record the number of items added to the shopping cart. Count = 1; / / get the cache array of the shopping cart (if there is no data, give it an empty array) var arr = wx.getStorageSync (& # 39th cart entries 39;) | / / if the shopping cart has data if (arr.length > 0) {/ / traversing the shopping cart array for (var j in arr) {/ / determine whether the id of the item in the shopping cart and the id passed by the event are equal to if (arr [j] .id = = e.target.id) {/ / equal, give count+1 (that is, add to the shopping cart again Quantity + 1) arr [j] .count = arr [j] .count + 1 / / finally, store the shopping cart data in the cache (there is no need to add push elements to the shopping cart array here, because this is available in the shopping cart, you can directly update the current array) try {wx.setStorageSync (& # 39 , arr)} catch (e) {console.log (e)} / / returns (use return in if, jump out of the loop to save operation, save performance) return }} / / after traversing the shopping cart, there is no corresponding item item, so put the current item of goodslist into the shopping cart array arr.push (this.data.goodslist [I]) } / / if there is no data in the shopping cart, put the item item push in the current data (the first time it is stored) else {arr.push (this.data.goodslist [I]);} / finally, store the shopping cart data in the cache try {wx.setStorageSync (& # 39 , arr) / / return (use return in if, jump out of loop saving operations, save performance) return;} catch (e) {console.log (e)})

Write the shopping cart section, as shown in the following figure:

Layout Analysis:

First a list main box, followed by an item box, this is a must.

Then divide the item into the picture on the left and the description on the right (the item box uses a horizontal elastic box)

The description on the right is divided into upper and lower parts (the box on the right uses a longitudinal elastic box)

The following price, shopping plus and minus, shopping cart part (using vertical elastic box)

Bottom shopping addition and subtraction, shopping cart section (use horizontal elastic box, use justify-content: space-between; in the middle to fill in the blank)

Cart.wxml:

[html] view plain copy

There is nothing in the shopping cart. Go shopping quickly.

{{item.name}} ¥{{item.price}}-+

Total: ¥{{total}} to settle ({{goodsCount}})

Cart.wxss:

[css] view plain copypage {background: # f2ebe3;} .cart {padding: 100px 00; display: flex; justify-content: center; flex-direction: column; align-items: center; color: # 999;} .cart image {width: 66px; height: 66px; margin-bottom: 20px;} .baoyou {font-size: 18px; color: # db2929; padding: 10px;} .cart {background: # fff Border-top: 1px solid # ddd; margin-bottom: 10px; padding: 10px 10px 0 10px; display: flex;} .roomimage {width: 80px; height: 80px; border: 1px solid # ddd;} .room.good-cont {display: flex; flex: 1; flex-direction: column; color: # 555; font-size: 14px; padding: 5px; height: 100px;}. Good-cont. Goods-navigator {display: flex; flex: 2 } .room.good-cont. Good-price {display: flex; flex-direction: column; flex: 3;} .room.good-cont. Good-price .price {font-size: 16px; color: # ec5151;} .room.good-cont. Good-price. Btn-box {display: flex; flex-direction: row; justify-content: space-between;} .good-cont. Good-price. Btn-box image {width: 23px; height: 23px Border: 0; margin: 0;} .room.good-cont. Good-price .btn {display: flex; flex-direction: row;} .room.good-cont. Good-price .btn input {margin: 0; width: 40px; text-align: center; border: 1px solid # eee; font-size: 16px; height: 28px;} .room.good-cont. Good-price .btn button {margin: 0;} .total {height: 40px; display: Flex-direction: row; justify-content: space-between; padding: 020px;} .total _ text {display: flex; color: # 777;} .total _ text text {color: # ec5151;} .total _ js {color: # fff; background: # ec5151; height: 30px; margin: 0;}

Cart.js:

[html] view plain copyPage ({data: {iscart: false, cart: [], / / data count: 1, / / Product quantity defaults to 1 total: 0, / / Total amount goodsCount: 0 / / quantity}, onLoad: function (options) {}, onShow: function () {var that = this) / / get the cached data saved on the product display page (the cached array of the shopping cart, if there is no data, give an empty array) var arr = wx.getStorageSync (& # 39) | | [] / / if data are available, calculate the total amount and total quantity if (arr.length > 0) {for (var i in arr) {that.data.total + = Number (arr [I] .price) * Number (arr [I] .count); that.data.goodsCount + = Number (arr [I] .count) } / / Update data this.setData ({iscart: true, cart: arr, total: that.data.total, goodsCount: that.data.goodsCount}) }, onHide: function () {/ / clear data this.setData ({iscart: false, cart: [], / / data total: 0, / / Total amount goodsCount: 0 / / quantity}) }, / * minus * / delCount: function (e) {console.log (e) / / get the quantity of the item in the shopping cart / / [get the id set on the btn, that is, the index value of the list] if (this.data.cart [e.target.id.substring (3)] .count

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.