小程序-产品列表页面（products）---模板

产品列表页面（products）—模板

=============================================
1. 路径:pages/tpl/products-tpl.wxml

<template name="products">
    <view class="products-box">
        <block wx:for="{{product_list}}">
            <view class="products-item" bindtap="onProductsItemTap" data-id="{{item.id}}">
                <image class="products-image" src="{{item.address}}" mode="aspectFill"></image>
                <view class="products-item-bottom">
                    <text class="name">{{item.name}}</text>
                    <view class="price">￥{{item.price}}</view>
                </view>
            </view>
        </block>
    </view>
</template>

2. 路径:pages/tpl/products-tpl.wxss

.products-box{
  margin: 0rpx 30rpx 20rpx 30rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
}
.products-item{
  min-height:300rpx;
  width: 48%;
  border-radius: 10rpx;
  margin-right: 0;
  margin-bottom: 20rpx;
  background-color: #fff;
  /* background-color: #F5F6F5; */
  text-align: center;
}
.products-image{
  margin: 10rpx auto 0 auto;
  width:80%;
  height:220rpx;
  border-radius: 10rpx;
}

.products-item-bottom{
  text-align: center;
  margin-bottom:20rpx;
  color: #333;
}
.products-item-bottom .name{
  font-size: 28rpx;
}
.products-item-bottom .price{
  font-size: 24rpx;
}