你们好，最近小艾特发现有诸多的小伙伴们对于wx微信号怎么改，wx微信这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。

1、 1.data-id='{{item.id}} '是标记列表的下标。

2、 2.wx:forhewx:for-items效果也用于循环数组；Wx:for-item用于为列表提供别名。

3、 3.我的代码

4、 视图类='欧川'商品wx:for=' { {商品} } ' wx:for-item=' item ' wx:for-index=' id ' data-id=' { { item。id-1 } } '

5、 Wx:for='{{goods}} '是获取列表wx:for-item='item '是给这个列表一个别名。

6、 image src='{{i.pic}}' data-id='{{i.id}}' bindtap='showGoodsDetail'/image

7、 view class=' title 1 ' @{ {最低价格} }/view

8、 view class='title2'{{i.name}}/view

9、 view class=' title 3 add cart ' bind tap=' tap add cart ' data-id=' { { id } } '选择/查看

10、 因为货物值已被修改，所以所有后续值都被更改为wx:for-item='item '之后的值

11、 XHTML代码

12、 !--goodslist start--

13、 view class='shop'

14、 view class='goods' wx:for='{{goods}}' wx:for-item='i' wx:for-index='id' data-id='{{item.id}}' wx:key='id'

15、 view class='goodsbox'

16、 image src='{{i.pic}}' data-id='{{i.id}}' bindtap='showGoodsDetail'/image

17、 view class=' title 1 ' @{ {最低价格} }/view

18、 view class='title2'{{i.name}}/view

19、 view class=' title 3 add cart ' bind tap=' tap add cart ' data-id=' { { id } } '选择/查看

20、 /view

21、 /view

22、 view class='clear'/view

23、 /view

24、 !--goodsdetail start--

25、 view class='goods-detail' hidden='{{!showGoodsDetail}}'

26、 view class='mask' bindtap='hideGoodsDetail'/view

27、 view class='goodsdetail'

28、 swiper class='banner' indicator-dots='true' autoplay='true' interval='3000' duration='500'

29、 block wx:for='{{i.pics}}' wx:key='key'

30、 swiper-item

31、 image src='{{i.pic}}' class='slide-image' width='355' height='150'/

32、 /swiper-item

33、 /block

34、 /swiper

35、 view class='title1'{{goods[item].name}}/view

36、 法国大使馆的反馈对你来说更加开放。

37、 View class='title3' Recommended star rating:

38、 image src='/images/shop/star.jpg'/image

39、 image src='/images/shop/star.jpg'/image

40、 /view

41、 view class='title4'

42、 view class=' title 5 ' { goods[id].价格} }/查看

43、 view class=' title 6 ' bind tap=' tapAddCart ' data-id=' { { id } } '加入购物车/查看

44、 /view

45、 /view

46、 /view

47、 !--goodscart start--

48、 视图' class='购物车详细信息hidden='之虚{{!showCartDetail||！'' cart.count}} '

49、 view class='mask' bindtap='hideCartDetail'/view

50、 view class='list'

51、 view class='carttit'

52、 View class='carttit0' Yang Jixin shopping cart/view

53、 view class=' cart empty ' image src='/images/index/del。jpg ' class='购物车图像'/image清空/查看

54、 /view

55、 view class='carttxt'

56、 view class='carttxt0 '满减/查看

57、 View class='carttxt1 '超过100米的订单免运费/递送费

58、 /view

59、 view class='item' wx:for='{{cart.list}}' wx:for-index='id' wx:for-item='num' wx:key='id'

60、 view class='name ellipsis'{{goods[id].name}}/view

61、 view class=' total ' @{ { goods[id].价格*购物车。list[id]} }/查看

62、 view class='reduce' data-id='{{id}}' bindtap='tapReduceCart'-/view

63、 view class='num'{{cart.list[id]}}/view

64、 view class='add' data-id='{{id}}' bindtap='tapAddCart'+/view

65、 /view

66、 /view

67、 /view

68、 view class='cart'

69、 view class='data' bindtap='showCartDetail'

70、 view class='icon'

71、 image src='/images/shopcar.png'/image

72、 view class='count'{{cart.count}}/view

73、 /view

74、 view class=' total ' @{ { cart。总计} }/查看

75、 /view

76、 form bindsubmit='submit' report-submit='true'

77、 button class='{{cart.count?'':'disabled'}}' formType='submit' disabled='{{!cart.count}}' bindtap='pay'

78、 结清结清结清账户

79、 /button

80、 /form

81、 /view

82、 Js代码：

83、 var urlManger=require('././constant/urlManger.js');

84、 var app=getApp();

85、 Page({

86、 data: {

87、 //winWidth: 0,

88、 //winHeight: 0,

89、 loadingHidden: false,

90、 goods: [],

91、 categoryid: 0,

92、 pageSize: 10,

93、 //load_statue:true

94、 cart: {

95、 count: 0,

96、 total: 0,

97、 list: {}

98、 },

99、 },

100、 onLoad: function (e) {

101、 var that=this;

102、 wx.getSystemInfo({

103、 success: function (res) {

104、 that.setData({

105、 clientHeight: res.windowHeight

106、 });

107、 }

108、 });

109、 this.setData({

110、 categoryid: parseInt(e.categoryid)

111、 })

112、 this.refreshGoodsList();

113、 },

114、 /**

115、 * 生命周期函数--监听页面加载

116、 */

117、 refreshGoodsList: function () {

118、 this.setData({

119、 page: 1,

120、 goods: []

121、 })

122、 this.loadGoods();

123、 },

124、 loadGoods: function () {

125、 var that=this;

126、 wx.request({

127、 url: urlManger.loadGoods,

128、 data: {

129、 page: that.data.page,

130、 pageSize: that.data.pageSize,

131、 categoryId: that.data.categoryid,

132、 },

133、 success: function (res) {

134、 that.setData({

135、 load_statue: true

136、 })

137、 var goods=that.data.goods;

138、 if (res.data.data !=null) {

139、 for (var i=0; i res.data.data.length; i++) {

140、 goods.push(res.data.data[i])

141、 }

142、 that.setData({

143、 goods: goods

144、 })

145、 }

146、 if (res.data.data==null || res.data.data.length 10) {

147、 console.log('数据为空')

148、 that.setData({

149、 loadingHidden: true

150、 })

151、 } else {

152、 that.setData({

153、 loadingHidden: false

154、 })

155、 }

156、 console.log(that.data)

157、 }

158、 , fail: function () {

159、 that.setData({

160、 load_statue: false

161、 })

162、 }

163、 , complete() {

164、 wx.stopPullDownRefresh();

165、 }

166、 })

167、 },

168、 //计算

169、 tapAddCart: function (e) {

170、 this.addCart(e.target.dataset.id);

171、 console.log(e.target.dataset.id);

172、 },

173、 tapReduceCart: function (e) {

174、 this.reduceCart(e.target.dataset.id);

175、 },

176、 addCart: function (id) {

177、 console.log(this.data.cart.list);

178、 var num=this.data.cart.list[id] || 0;

179、 console.log('num' + num);

180、 this.data.cart.list[id]=num + 1;

181、 this.countCart();

182、 },

183、 reduceCart: function (id) {

184、 var num=this.data.cart.list[id] || 0;

185、 if (num=1) {

186、 delete this.data.cart.list[id];

187、 } else {

188、 this.data.cart.list[id]=num - 1;

189、 }

190、 this.countCart();

191、 },

192、 countCart: function () {

193、 var count=0,

194、 total=0;

195、 for (var id in this.data.cart.list) {

196、 var goods=this.data.goods[id];

197、 count +=this.data.cart.list[id];

198、 total +=goods.price * this.data.cart.list[id];

199、 }

200、 this.data.cart.count=count;

201、 this.data.cart.total=total;

202、 this.setData({

203、 cart: this.data.cart

204、 });

205、 },

206、 //显示隐藏购物车

207、 showCartDetail: function () {

208、 this.setData({

209、 showCartDetail:this.data.showCartDetail

210、 });

211、 },

212、 hideCartDetail: function () {

213、 this.setData({

214、 showCartDetail: false

215、 });

216、 },

217、 //显示隐藏商品详情弹窗

218、 showGoodsDetail: function (e) {

219、 this.setData({

220、 showGoodsDetail:this.data.showGoodsDetail,

221、 id: e.target.dataset.id

222、 });

223、 },

224、 hideGoodsDetail: function () {

225、 this.setData({

226、 showGoodsDetail: false

227、 });

228、 },

229、 pay: function () {

230、 wx.navigateTo({

231、 url: './to-pay-order/index'

232、 })

233、 },

234、 });

235、 css代码：

236、 page{font-family: '微软雅黑';padding-bottom:100rpx}

237、 .clear{clear:both;}

238、 .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;}

239、 .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;}

240、 .header .filter{width:50%;text-align: center;color:#3c3c3c;font-size: 30rpx;}

241、 .header .left{color:#f38815;border-bottom:1px solid #f38815}

242、 .shop{position:relative;top:20rpx;padding: 10rpx 0;margin-bottom:200rpx;}

243、 .shop .goods{width: 50%;float:left;text-align: center;}

244、 .shop .goods .goodsbox{background:#fff;width:90%;margin:0 auto;height:400rpx;position:relative;margin-top:30rpx;box-shadow:0 0 5px #eee;}

245、 .shop .goods image{width: 100%;height:250rpx;}

246、 .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;}

247、 .shop .goods .title2{width:100%;color:#3c3c3c;font-size: 30rpx;position:absolute;top:270rpx;left:0;z-index: 99;text-align: center}

248、 .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;}

249、 /*下方购物车*/

250、 .cart-detail,cart-detail .mask{position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 999999}

251、 .cart-detail .mask{background: rgba(0,0,0,0.7);}

252、 .cart-detail .list{position: absolute;left: 0;bottom: 100rpx;width: 100%;background: #f7f7f7;padding:0 0 70rpx;z-index:9999999}

253、 .cart-detail .list .item{display: -webkit-flex;color: #333;font-size: 36rpx;line-height: 50rpx;padding: 20rpx 40rpx;border-bottom:1px solid #d5d5d5}

254、 .cart-detail .list .item .name{-webkit-flex: 1;font-size:30rpx;color:#606060}

255、 .cart-detail .list .item .total{width: 120rpx;font-size:36rpx;color:#373737;font-weight: bold}

256、 .cart-detail .list .item .reduce,

257、 .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}

258、 .cart-detail .list .item .reduce{background: #ffffff;color:#4a4a4a;border:1px solid #4a4a4a}

259、 .cart-detail .list .item .num{width: 50rpx;text-align: center;margin: 0 5rpx;color:#4a4a4a}

260、 .cart{display: -webkit-flex;position: fixed;left: 0;bottom: 0;width: 100%;height: 100rpx;background: #3c3d41;z-index: 999999}

261、 .cart .data{-webkit-flex: 1;/*border-top: 1rpx solid #e7e7e7;*/}

262、 .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}

263、 .cart .data .icon image{position: absolute;left: 15rpx;top: 15rpx;width: 70rpx;height: 70rpx;}

264、 .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}

265、 .cart .data .total{color: #f45044;font-size: 36rpx;line-height: 100rpx;padding-left: 160rpx;}

266、 .cart button{width: 200rpx;height: 100%;font-size: 30rpx;background:#f38815;color:#fff;line-height:100rpx;border-radius:0}

267、 .cart button[disabled][type='default'], wx-button[disabled]:not([type]) {color:#fff;background-color:#333333;}

268、 .carttit{background:#e5e5e5;padding:0 20rpx;height:100rpx;line-height:100rpx;}

269、 .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;}

270、 .cartempty{font-size: 30rpx;float:right;color:#4a4a4a;text-align: right}

271、 .carttxt{padding:0 20rpx;height:80rpx;line-height:80rpx;border-bottom:1px solid #d5d5d5}

272、 .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;}

273、 .carttxt1{float:left;font-size:24rpx;color:#4a4a4a;text-align: right}

274、 .cartimg{width:30rpx;height:40rpx;position:relative;top:8rpx;margin-right:3px;}

275、 /*弹窗*/

276、 .goods-detail .mask{position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 999999}

277、 .goods-detail .mask{background: rgba(0,0,0,0.7);}

278、 .goodsdetail{position: fixed;top:50%;width:80%;height:800rpx;left:10%;margin-top:-450rpx;background: #fff;z-index: 99999999999999;border-radius:10px;overflow: hidden}

279、 .banner{height: 500rpx;border-radius:10px;}

280、 .banner image{width: 100%;height: 100%;border-radius:10px 10px 0 0;}

281、 .goodsdetail .title1{padding:10rpx 20rpx;color:#3c3c3c;font-size: 36rpx;}

282、 .goodsdetail .title2{padding:5rpx 20rpx;color:#3c3c3c;font-size: 24rpx;}

283、 .goodsdetail .title3{padding:5rpx 20rpx;color:#3c3c3c;font-size: 24rpx;}

284、 .goodsdetail .title3 image{width:24rpx;height:24rpx}

285、 .goodsdetail .title4{width:100%;position:absolute;bottom:20rpx;color:#3c3c3c;}

286、 .goodsdetail .title5{width:50%;float:left;font-size:36rpx;margin-left:20rpx;font-size: 36rpx;}

287、 .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;}

288、 .goodsdetail .title7{height:80rpx;font-size: 24rpx;float:right;color:#4a4a4a;text-align:center;margin-right:30rpx;border-radius:5px;}

289、 .goodsdetail .title7 .reduce,

290、 .goodsdetail .title7 .add{font-size: 50rpx;background: #feb70f;width: 50rpx;height: 50rpx;text-align: center;border-radius: 50%;float:left;line-height:50rpx;}

291、 .goodsdetail .title7 .num{float:left;width:50rpx;line-height:50rpx;text-align: center;margin: 0 10rpx;}

以上就是wx微信这篇文章的一些介绍，希望对大家有所帮助。