组件-》表单组件-》checkbox：
https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html
组件-》视图容器-》swiper:
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
组件-》表单组件-》input：
https://developers.weixin.qq.com/miniprogram/dev/component/input.html
1、调后端接口获得商品的全部数据，商品是分类展示的，先将第一类的所有商品都取出来，展示在页面上
onLoad: function (options) { wx.request({ url: 'http://localhost:8888/wx/day5/food', success:(res) => { console.log(res) if (res.data.code === 200) { let spuList = res.data.data.categoryList[0].spuList this.setData({ categoryList: res.data.data.categoryList, currentFoodList: spuList }) } } }) },2、每次点击切换tab页时，动态修改currentFootList的值，这个值决定页面渲染的商品列表
handleNav(e) { let {index} = e.currentTarget.dataset let {categoryList} = this.data this.setData({ currentIndex: index, currentFoodList: categoryList[index].spuList }) },3、点击加号或减号时，动态修改一个ordered对象，这个对象保存着所有添加到购物车的商品信息，包括某一个商品添加的数量，ordered这个对象再复制一份放在全局对象中
handleListItemAdd(e) { let { item } = e.currentTarget.dataset let {currentIndex, ordered} = this.data if (ordered[item.spuId]) { ordered[item.spuId].count = ordered[item.spuId].count + 1 ordered[item.spuId].checked = true } else { ordered[item.spuId] = item ordered[item.spuId].count = 1 ordered[item.spuId].checked = true } app.globalData.ordered = ordered this.setData({ ordered }) },4、购物车页面，从全局数据中获取ordered对象，并渲染购物车页面。购物车页面，每个商品都包含一个复选框，根据复选框的勾选情况动态计算总价，商品总数。
priceAndCount() { let {orderedArr} = this.data let totalCount = 0 let totalPrice = 0 for (let i = 0; i < orderedArr.length; i++) { if (orderedArr[i].checked) { totalCount = totalCount + orderedArr[i].count totalPrice = totalPrice + orderedArr[i].count * orderedArr[i].currentPrice } } this.setData({ totalCount, totalPrice }) }, handleCheckboxChange(e) { let {value} = e.detail let {orderedArr} = this.data for (let i = 0; i < orderedArr.length; i++) { if (value.indexOf(orderedArr[i].spuId + '') >= 0) { orderedArr[i].checked = true } else { orderedArr[i].checked = false } } this.setData({ orderedArr, selectAll: value.length === orderedArr.length }) console.log(e) this.priceAndCount() },
5、全选按钮。根据全选按钮的状态，变了整个orderedArr数组，修改每一项的checked属性。
handleSelectAll(e) { let { value } = e.detail let { orderedArr } = this.data let checkedCount = 0 for (let i = 0; i < orderedArr.length; i++) { if (value.length > 0) { orderedArr[i].checked = true checkedCount = checkedCount + 1 } else { orderedArr[i].checked = false } } this.setData({ orderedArr, selectAll: checkedCount === orderedArr.length }) this.priceAndCount() },6.购物车页面添加修改数量的加号和减号
<button size="mini" disabled="{{item.subBtnDisabled}}" data-index="{{index}}" bindtap="handleSub">-</button> <text>数量：{{item.count}}</text> <button size="mini" data-index="{{index}}" bindtap="handleAdd">+</button> handleSub(e) { let { index } = e.currentTarget.dataset let { orderedArr } = this.data orderedArr[index].count = orderedArr[index].count - 1 if (orderedArr[index].count <= 1) { orderedArr[index].subBtnDisabled = true } else { orderedArr[index].subBtnDisabled = false } this.setData({ orderedArr }) this.priceAndCount() }, handleAdd(e) { let {index} = e.currentTarget.dataset let {orderedArr} = this.data orderedArr[index].count = orderedArr[index].count + 1 orderedArr[index].subBtnDisabled = false this.setData({ orderedArr }) this.priceAndCount() },
1.swiper
indicator-dots:是否显示面板指示点
autoplay:是否自动切换
interval:自动切换时间间隔
duration: 滑动动画时长
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <view wx:for="{{imgUrls}}" wx:key="{{index}}"> <swiper-item> <image src="{{item}}" class="m-slide-image"/> </swiper-item> </view> </swiper>input
<input type="text" value="{{searchValue}}" bindinput="handleInputChange" placeholder="请输入搜索内容" class="m-input"></input>请求搜索接口：
wx.request({ url: 'https://jbiz.share1diantong.com/fa053/topic/search/v1', method: 'POST', data: { "pageNum": 1, "kw": searchValue, "pageSize": 10, "userId": 0 }, success: (res) => { console.log(res) this.setData({ list: res.data.data.list }) console.log(res.data.data.list) } })gif：
