Simone微信小程序区分wx:for和wx:for-item及遮罩层
的有关信息介绍如下：
1.微信小程序遇到wx:for和wx:for-item该如何区分?
2.我实现的效果是在商品图片，然后以遮罩层的形式出现商品详情页。
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"是为了给这个列表赋别名
因为goods值被修改，所以接下来的所有值都改为被wx:for-item="item" 后的值
XHTML代码
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'
})
},
});
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;}
