微信小程序循环商品列表以及如何向其他页面传参数

商品列表是好多个商品，jquery中我们可以用for循环，或者$.each()来循环商品列表，可是小程序中应该怎么写呢？

其实很简单：

1、wx:for 是用来循环数组的,在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

<view class='shop_Box'>
  <view class='shopBox' wx:for='{{con}}' wx:key='{{index}}' wx:for-index="index" wx:for-item="con">
    <view class='shopImg'>
      <image src='{{con.image1}}' />
    </view>
    <view class='shopName'>{{con.shopName}}</view>
    <view class='shopMessage'>
      <view class='shops'>
        <text class='shopPrice'>￥{{con.price}}</text>
        <text class='markPrice'>￥{{con.markPrice}}</text>
      </view>
    </view>
  </view>

2、简单介绍下wx:key,wx:for-index,wx:for-item

wx:for-item 可以指定数组当前元素的变量名，即可以给数组起一个别名。

wx:for-index 可以指定数组当前下标的变量名：

 <view class='shopBox' wx:for='{{con}}' wx:key='{{index}}' wx:for-index="index" wx:for-item="arr">

wx:key来指定列表中项目的唯一的标识符。如在商品列表循环中可以用来获取当前商品的下标。

下面是完整的代码：

模拟的数组：

con:[
      {
        "image1": "/image/1541231387311.jpg",
        "shopName": "内蒙特产套餐—（烤羊腿：1000g/盒*1+内蒙奶酪：450g/盒*1+风干牛肉：500g/袋*2）",
        "price": 1280.00,
        "markPrice": 2256.00
      },
      {
        "image1": "/image/1541231758198.jpg",
        "shopName": "老人保健按摩毯",
        "price": 1280.00,
        "markPrice": 2256.00
      },
      {
        "image1": "/image/1536113964848.jpg",
        "shopName": "詹姆士公爵干红葡萄酒VCE0137【750ml/瓶*3瓶】",
        "price": 1280.00,
        "markPrice": 2256.00
      },
      {
        "image1": "/image/1541236035695.jpg",
        "shopName": "泰国天然乳胶高低颈椎按摩枕（两个）",
        "price": 1280.00,
        "markPrice": 2256.00
      }
    ],

wxss:

.shop_Box {
  min-height: 200rpx;
  margin-bottom: 120rpx;
  background: #f5f5f5;
  overflow: auto;
  margin-top: 34rpx;
}

.shopBox {
  /*clear: both;*//*margin-top: 15px;*/
  width: 46%;
  /* height: 276px; *//*border-right: solid 2px #e5e5e5;
    border-top: solid 2px #e5e5e5;*/
  overflow: auto;
  float: left;
  background-color: #fff;
  margin: 0rpx 10rpx 20rpx 20rpx;
  /*margin-bottom: 15px;*/
}

.shopBox:nth-child(even) {
  border-right: none;
  width: 46%;
  margin: 0rpx 10rpx 20rpx 10rpx;
}

.shopBox:nth-child(1) {
  margin-top: 20rpx;
}

.shopBox:nth-child(2) {
  margin-top: 20rpx;
}

.shopImg {
  width: 100%;
  height: 230rpx;
  margin: 0 auto;
}

.shopImg image {
  width: 100%;
  height: 230rpx;
  margin: 0 auto;
  /* margin-top: 15px;*/
}

.shopName {
  height: 40rpx;
  padding: 30rpx 40rpx 40rpx 24rpx;
  line-height: 40rpx;
  font-size: 24rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  /* white-space: nowrap; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  text-align: left;
}

.shopMessage {
  height: 54rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}

.shops {
  float: left;
}

.shopPrice {
  color: #ec4444;
  padding-left: 24rpx;
  font-size: 28rpx;
}

.fan {
  color: #acacac;
  font-size: 24rpx;
  padding-left: 22rpx;
}

.markPrice {
  text-decoration-line: line-through;
  color: #acacac;
  font-size: 28rpx;
  padding-left: 20rpx;
}

 

效果图：

关于页面传参问题：

设置data-xxx 

 <view class='classification' bindtap='tabLine' data-postid='{{goods_firstList.id}}' data-postname='{{goods_firstList.first_name}}'>

上面代码中我设置了商品id，然后使用bindtap绑定事件，wx.navigateTo跳转页面将参数传过去：

 //分类跳转到列表页面
  tabLine:function (e) {
    var dataid = e.currentTarget.dataset.postid;
    var firstName = e.currentTarget.dataset.postname;
    console.log(dataid + "dddddd" + firstName);
    wx.navigateTo({
      url: '../shopCar/shopCar?id=' + dataid + '&firstName=' + firstName
    })
    console.log("你点了我");
  },

在 打印出来

如下图：获取到传过来的参数了