小程序-列表渲染

所谓的列表渲染，就是对于列表数据的展示。其使用场景大多为商品列表页面、购物车页面、收藏列表等页面，应用广泛。微信小程序实现列表展示的方式其实就是用for循环来循环生成相对应的item布局，使用 wx:for 重复渲染组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item；
使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名。

wx:for 一般有两种使用场景，一种是配合view来使用，另一种则是搭配block来使用。这两者的区别就在于block不会被渲染，而使用view组件则会多渲染一次，两者可实现同样的效果，根据不同的需求选择。

<view wx:for="{{array}}" wx:for-index="position" wx:for-item="itemName"></view>
<block wx:for="{{array}}"></block>

话不多说，上代码！

 <!-- tradeList是要循环的数组，内部的属性通过item.xxx的方式调用 -->
 <block wx:for='{{tradeList}}'>
   <!-- data-*属性在触发事件时获取  -->
   <view class='singleTrade' hover-class='item-press' catchtap='showTradeDetail' data-id='{{item.goodsId}}'>
     <image src='{{item.imageUrl}}' class='img' />
     <view class='a'>
       <view class='name'>{{item.name}}</view>
     </view>
     <view class='b'>
       <view class='price'>￥{{item.price}}</view>
       <image src='/res/icon/collect.png' class='b_img' catchtap='deleteCollection' data-pos='{{index}}' />
     </view>
   </view>
 </block>

本段代码实现的效果如下：

收藏.png

这个tradeList数组就是从服务端获取到的列表数据，<block wx:for='{{tradeList}}'>这一行不会被渲染，即调试时不会有相对应的布局，这是block和view的不同所在。
下面在看看js中的操作：

  /**
   * 下拉刷新(请求服务获取数据并赋值)
   */
  pullDownRefreshData: function (context) {
    let params = {
      pageIndex: 1,
    };
    app.YoniClient.request(app.Func.GET_FAVORITE_LIST, params, function (res) {
      wx.stopPullDownRefresh();
      if (res.code == 0) {
        context.setData({
          tradeList: res.result.goodsList,
        });
      }
    });
  },

重点解释一下item的点击事件，小程序是如何知道用户是点击了哪一个item呢，这个就是通过data-*来获得的。在组件上触发的事件时，会发送给事件处理函数。

  /**
   * 查看商品详情
   */
  showTradeDetail: function (e) {
    let id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '/pages/product_detail/product_detail?id=' + id,
    })
  },

这是item点击事件，这个e就会携带着item.goodsId，这是在wxml中绑定的关系。
当然，这个效果离不开至关重要的wxss（css）：

.singleTrade {
  background: #fff;
  padding: 20rpx;
  display: flex;
  border-bottom: 20rpx solid #fafafa;
}

.item-press {
  background: #fafafa;
  padding: 20rpx;
  display: flex;
  border-bottom: 20rpx solid #fafafa;
}

.img {
  width: 100px;
  height: 100px;
}

.b_img {
  width: 50rpx;
  height: 50rpx;
  bottom: 20rpx;
}

.a {
  flex: 1;
  margin: 0rpx 15rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.b {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.price {
  font-size: 11pt;
}

.name {
  font-size: 11pt;
  line-height: 50rpx;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.desc {
  font-size: 12pt;
  color: gray;
}

这样一个简单的列表数据就渲染完毕了，如果想要实现点复杂且不失美观的布局效果，那就要从各个方面调整，最重要的调整好wxss。

新品上架.png

这种布局要是放在web开发中position: relative;float: left;...一顿搞就实现了，在小程序开发中可以使用比较强势的flex布局来实现：

display: flex;
flex-wrap: wrap;
justify-content: space-between;

flex其强大之处在此不做赘述，有时间再搞。

个人使用云开发的小程序"喃喃故事汇"已上线,欢迎查看效果.

搜索"喃喃故事汇".jpg

最后编辑于：2019.04.27 18:48:24