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

最新推荐文章于 2024-08-26 17:31:40 发布

书山有路_邓

最新推荐文章于 2024-08-26 17:31:40 发布

阅读量5.4k

点赞数 4

分类专栏： WeChat 文章标签： model-tpl

本文链接：https://blog.youkuaiyun.com/weixin_41497075/article/details/89077309

版权

WeChat 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种用于展示产品列表的页面模板实现方法，包括wxml和wxss代码细节，展示了如何通过循环遍历产品数据并展示每个产品的图片、名称及价格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

产品列表页面（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;
}