1、data-id="{{item.id}}"为标记列表的下标，2.wx:forhewx:for-items效果一样是循环数组用的；而wx:for-item则是给列表赋别名用的。3.我的代码view class="goods" wx:for="{{goods}}" wx:for-item="item" wx:for-index="id" data-id="{{item.id-1}}"中wx:for="{{goods}}"是为了获取列表wx:for-item="item"是为了给这个列表赋别名
2、<image src="{{i.pic}}" data-id="{{i.id}}" bindtap="showGoodsDetail"></image><view class="title1">￥{{i.minPrice}}</view><view class="title2">{{i.name}}</view><view class="title3 addCart" bindtap="tapAddCart" data-id="{{id}}">选择</view>因为goods值被修改，所以接下来的所有值都改为被wx:for-item="item" 后的值
3、XHTML代码<!--goodslist start--><view class="shop"><view class="goods" wx:for="{{goods}}" wx:for-item="i" wx:for-index="id" data-id="{{item.id}}" wx:key="id"><view class="goodsbox"><image src="{{i.pic}}" data-id="{{i.id}}" bindtap="showGoodsDetail"></image><view class="title1">￥{{i.minPrice}}</view><view class="title2">{{i.name}}</view><view class="title3 addCart" bindtap="tapAddCart" data-id="{{id}}">选择</view></view></view><view class="clear"></view></view><!--goodsdetail start--><view class="goods-detail" hidden="{{!showGoodsDetail}}"><view class="mask" bindtap="hideGoodsDetail"></view><view class="goodsdetail"><swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="500"><block wx:for="{{i.pics}}" wx:key="key"><swiper-item><image src="{{i.pic}}" class="slide-image" width="355" height="150"/></swiper-item></block></swiper><view class="title1">{{goods[item].name}}</view><view class="title2">法国大使馆的反馈给对方考虑更放得开了给你看</view><view class="title3">推荐星级：<image src="/images/shop/star.jpg"></image><image src="/images/shop/star.jpg"></image></view><view class="title4"><view class="title5">¥{{goods[id].price}}</view><view class="title6" bindtap="tapAddCart" data-id="{{id}}">加入购物车</view></view></view></view><!--goodscart start--><view class="cart-detail" hidden="{{!showCartDetail||!cart.count}}"><view class="mask" bindtap="hideCartDetail"></view><view class="list"><view class="carttit"><view class="carttit0">购物车</view><view class="cartempty"><image src="/images/index/del.jpg" class="cartimg"></image>清空</view></view><view class="carttxt"><view class="carttxt0">满减</view><view class="carttxt1">订单满100m免运费\配送费</view></view><view class="item" wx:for="{{cart.list}}" wx:for-index="id" wx:for-item="num" wx:key="id"><view class="name ellipsis">{{goods[id].name}}</view><view class="total">￥{{goods[id].price*cart.list[id]}}</view><view class="reduce" data-id="{{id}}" bindtap="tapReduceCart">-</view><view class="num">{{cart.list[id]}}</view><view class="add" data-id="{{id}}" bindtap="tapAddCart">+</view></view></view></view><view class="cart"><view class="data" bindtap="showCartDetail"><view class="icon"><image src="/images/shopcar.png"></image><view class="count">{{cart.count}}</view></view><view class="total">￥{{cart.total}}</view></view><form bindsubmit="submit" report-submit="true"><button class="{{cart.count?'':'disabled'}}" formType="submit" disabled="{{!cart.count}}" bindtap="pay">结算</button></form></view>
4、js代码：var urlManger = require("../../constant/urlManger.js");var app = getApp();Page({data: {// winWidth: 0,// winHeight: 0,loadingHidden: false,goods: [],categoryid: 0,pageSize: 10,// load_statue:truecart: {count: 0,total: 0,list: {}},},onLoad: function (e) {var that=this;wx.getSystemInfo({success: function (res) {that.setData({clientHeight: res.windowHeight});}});this.setData({categoryid: parseInt(e.categoryid)})this.refreshGoodsList();},/*** 生命周期函数--监听页面加载*/refreshGoodsList: function () {this.setData({page: 1,goods: []})this.loadGoods();},loadGoods: function () {var that = this;wx.request({url: urlManger.loadGoods,data: {page: that.data.page,pageSize: that.data.pageSize,categoryId: that.data.categoryid,},success: function (res) {that.setData({load_statue: true})var goods = that.data.goods;if (res.data.data != null) {for (var i = 0; i < res.data.data.length; i++) {goods.push(res.data.data[i])}that.setData({goods: goods})}if (res.data.data == null || res.data.data.length < 10) {console.log("数据为空")that.setData({loadingHidden: true})} else {that.setData({loadingHidden: false})}console.log(that.data)}, fail: function () {that.setData({load_statue: false})}, complete() {wx.stopPullDownRefresh();}})},//计算tapAddCart: function (e) {this.addCart(e.target.dataset.id);console.log(e.target.dataset.id);},tapReduceCart: function (e) {this.reduceCart(e.target.dataset.id);},addCart: function (id) {console.log(this.data.cart.list);var num = this.data.cart.list[id] || 0;console.log("num" + num);this.data.cart.list[id] = num + 1;this.countCart();},reduceCart: function (id) {var num = this.data.cart.list[id] || 0;if (num <= 1) {delete this.data.cart.list[id];} else {this.data.cart.list[id] = num - 1;}this.countCart();},countCart: function () {var count = 0,total = 0;for (var id in this.data.cart.list) {var goods = this.data.goods[id];count += this.data.cart.list[id];total += goods.price * this.data.cart.list[id];}this.data.cart.count = count;this.data.cart.total = total;this.setData({cart: this.data.cart});},//显示隐藏购物车showCartDetail: function () {this.setData({showCartDetail: !this.data.showCartDetail});},hideCartDetail: function () {this.setData({showCartDetail: false});},//显示隐藏商品详情弹窗showGoodsDetail: function (e) {this.setData({showGoodsDetail: !this.data.showGoodsDetail,id: e.target.dataset.id});},hideGoodsDetail: function () {this.setData({showGoodsDetail: false});},pay: function () {wx.navigateTo({url: '../to-pay-order/index'})},});
5、css代艨位雅剖码：page{font-family: "微软雅黑";padding-bottom:100rpx}.clear{clear:both;}.header{position: fixed;display: -webkit-flex;left: 0;top: 0;width: 100%;padding: 0;box-sizing: border-box;z-index: 1;background: #fff;height: 80rpx;line-height: 80rpx;}.header{display: -webkit-flex;position: fixed;display: -webkit-flex;left: 0;top: 0;width: 100%;padding: 0;box-sizing: border-box;z-index: 19999999999999999999;background: #fff;height: 80rpx;line-height: 80rpx;}.header .filter{width:50%;text-align: center;color:#3c3c3c;font-size: 30rpx;}.header .left{color:#f38815;border-bottom:1px solid #f38815}.shop{position:relative;top:20rpx;padding: 10rpx 0;margin-bottom:200rpx;}.shop .goods{width: 50%;float:left;text-align: center;}.shop .goods .goodsbox{background:#fff;width:90%;margin:0 auto;height:400rpx;position:relative;margin-top:30rpx;box-shadow:0 0 5px #eee;}.shop .goods image{width: 100%;height:250rpx;}.shop .goods .title1{color:#3c3c3c;font-size: 24rpx;height:100rpx;width:100rpx;line-height:65rpx;background:#fff;border-radius:50%;text-align:center;position:absolute;top:200rpx;left:50%;margin-left:-50rpx;}.shop .goods .title2{width:100%;color:#3c3c3c;font-size: 30rpx;position:absolute;top:270rpx;left:0;z-index: 99;text-align: center}.shop .goods .title3{width:150rpx;background:#393939;color:#fff;font-size:24rpx;position:absolute;top:320rpx;left:30%;z-index: 99;text-align: center;border-radius:5px;font-size: 24rpx;height:50rpx;line-height: 50rpx;}/*下方购物车*/.cart-detail, .cart-detail .mask{position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 999999}.cart-detail .mask{background: rgba(0,0,0,0.7);}.cart-detail .list{position: absolute;left: 0;bottom: 100rpx;width: 100%;background: #f7f7f7;padding:0 0 70rpx;z-index:9999999}.cart-detail .list .item{display: -webkit-flex;color: #333;font-size: 36rpx;line-height: 50rpx;padding: 20rpx 40rpx;border-bottom:1px solid #d5d5d5}.cart-detail .list .item .name{-webkit-flex: 1;font-size:30rpx;color:#606060}.cart-detail .list .item .total{width: 120rpx;font-size:36rpx;color:#373737;font-weight: bold}.cart-detail .list .item .reduce,.cart-detail .list .item .add{font-size: 50rpx;background: #4a4a4a;width: 50rpx;height: 50rpx;text-align: center;border-radius: 50%;color:#fff;line-height: 40rpx;border:1px solid #4a4a4a}.cart-detail .list .item .reduce{background: #ffffff;color:#4a4a4a;border:1px solid #4a4a4a}.cart-detail .list .item .num{width: 50rpx;text-align: center;margin: 0 5rpx;color:#4a4a4a}.cart{display: -webkit-flex;position: fixed;left: 0;bottom: 0;width: 100%;height: 100rpx;background: #3c3d41;z-index: 999999}.cart .data{-webkit-flex: 1;/*border-top: 1rpx solid #e7e7e7;*/}.cart .data .icon{position: absolute;left: 40rpx;top: -40rpx;width: 100rpx;height: 100rpx;background: #393939;border-radius: 50%;border:5px solid #3c3d41;box-shadow:0 0 5px #000}.cart .data .icon image{position: absolute;left: 15rpx;top: 15rpx;width: 70rpx;height: 70rpx;}.cart .data .icon .count{position: absolute;left: 70rpx;top: -20rpx;font-size: 30rpx;width: 50rpx;height: 50rpx;line-height: 50rpx;color: #fff;background: #f45044;border-radius: 50%;text-align: center}.cart .data .total{color: #f45044;font-size: 36rpx;line-height: 100rpx;padding-left: 160rpx;}.cart button{width: 200rpx;height: 100%;font-size: 30rpx;background:#f38815;color:#fff;line-height:100rpx;border-radius:0}.cart button[disabled][type="default"], wx-button[disabled]:not([type]) {color:#fff;background-color:#333333;}.carttit{background:#e5e5e5;padding:0 20rpx;height:100rpx;line-height:100rpx;}.carttit0{width:200rpx;height:50rpx;font-size: 30rpx;float:left;color:#4a4a4a;margin-top:25rpx;line-height:50rpx;border-left:3px solid #ffd600;text-indent:15rpx;}.cartempty{font-size: 30rpx;float:right;color:#4a4a4a;text-align: right}.carttxt{padding:0 20rpx;height:80rpx;line-height:80rpx;border-bottom:1px solid #d5d5d5}.carttxt0{width:100rpx;height:50rpx;font-size:24rpx;float:left;color:#f38d1e;margin-top:15rpx;line-height:50rpx;border:1px solid #f38d1e;text-align: center;border-radius:3px;margin-right:5px;}.carttxt1{float:left;font-size:24rpx;color:#4a4a4a;text-align: right}.cartimg{width:30rpx;height:40rpx;position:relative;top:8rpx;margin-right:3px;}/*弹窗*/.goods-detail .mask{position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 999999}.goods-detail .mask{background: rgba(0,0,0,0.7);}.goodsdetail{position: fixed;top:50%;width:80%;height:800rpx;left:10%;margin-top:-450rpx;background: #fff;z-index: 99999999999999;border-radius:10px;overflow: hidden}.banner{height: 500rpx;border-radius:10px;}.banner image{width: 100%;height: 100%;border-radius:10px 10px 0 0;}.goodsdetail .title1{padding:10rpx 20rpx;color:#3c3c3c;font-size: 36rpx;}.goodsdetail .title2{padding:5rpx 20rpx;color:#3c3c3c;font-size: 24rpx;}.goodsdetail .title3{padding:5rpx 20rpx;color:#3c3c3c;font-size: 24rpx;}.goodsdetail .title3 image{width:24rpx;height:24rpx}.goodsdetail .title4{width:100%;position:absolute;bottom:20rpx;color:#3c3c3c;}.goodsdetail .title5{width:50%;float:left;font-size:36rpx;margin-left:20rpx;font-size: 36rpx;}.goodsdetail .title6{width:200rpx;height:80rpx;font-size: 24rpx;line-height:80rpx;float:right;background:#393939;color:#fff;text-align:center;margin-right:20rpx;border-radius:5px;}.goodsdetail .title7{height:80rpx;font-size: 24rpx;float:right;color:#4a4a4a;text-align:center;margin-right:30rpx;border-radius:5px;}.goodsdetail .title7 .reduce,.goodsdetail .title7 .add{font-size: 50rpx;background: #feb70f;width: 50rpx;height: 50rpx;text-align: center;border-radius: 50%;float:left;line-height:50rpx;}.goodsdetail .title7 .num{float:left;width:50rpx;line-height:50rpx;text-align: center;margin: 0 10rpx;}