微信小程序区分wx:for和wx:for-item及遮罩层

1、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

</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:true

  cart: {

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