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

小灰灰 2022-04-23 13:28 421阅读 0赞

商品列表是好多个商品，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` 可以指定数组当前下标的变量名：

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

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDgxNTEy_size_16_color_FFFFFF_t_70][]

关于页面传参问题：

设置data-xxx

上面代码中我设置了商品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("你点了我");
      },

在![20190225175536529.png][] 打印出来

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

![20190225175455286.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NDgxNTEy_size_16_color_FFFFFF_t_70]: /images/20220317/63cc7b1498a2494381f1f41d03853831.png
[20190225175536529.png]: /images/20220317/670e59bc4eeb437fb2b9351f8fb90c2c.png
[20190225175455286.png]: /images/20220317/be126a2569a7461cb1e5dd419b61ffa9.png