微信 小程序布局 标题之二分列表
<view class="commodity-zone">
<!-- 系列商品模板 -->
<block class="zone-among" wx:key="teaamong" wx:for="{{teaamong}}" wx:for-index="index">
<!-- 控制显示与隐藏的外衣 -->
<view wx:if="{{item.listshow}}">
<!-- 系列标题条 -->
<view class="among-titile">
<view class="titile-left">
<view class="left-img">
<image src="../../imgs/index/o_list.png"></image>
</view>
<text>{{item.teatitle}}</text>
</view>
<!-- 右侧箭头控制各个茶系显示隐藏函数，参数为依据 -->
<view class="titile-right" data-index="{{index}}" bindtap="sectionSelectRt">
<image src="../../imgs/index/o_more.png"></image>
</view>
</view>
<!-- 系列主体内容 -->
<view class="among-content">
<block wx:key="tealist" wx:for="{{item.tealist}}" wx:for-index="index">
<view class="tea-box">
<view class="tea-img" bindtap='commodDetail'>
<image src="{{item.image}}"></image>
</view>
<view class="tea-detail">
<view class="tea-name">
<text>{{item.teaname}}</text>
</view>
<view class="tea-price">
<text>￥{{item.price}}</text>
<!-- 购买按钮 需要把对应商品信息传到 购买弹出框shopButtonShow-->
<view class="tea-shop" data-id="{{item.id}}" bindtap="shopButtonShow">
<image src="../../imgs/index/good_buy.png"></image>
</view>
</view>
</view>
</view>
</block>
</view>
</view>
</block>
</view>
//--------------------------------------------
/* 商品详情区 */
/* 标题条 */
.among-titile{
height: 100rpx;
">white;
padding: 10rpx 44rpx 10rpx 24rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
/* line-height: 70rpx; */
}
/* 标题条-左侧 */
.titile-left{
display: flex;
align-items: center;
font-size: 36rpx;
line-height: 48rpx
}
.left-img{
width: 10rpx;
height: 48rpx;
margin-right: 20rpx;
}
.left-img image{
width: 100%;
height: 100%;
}
/* 标题条-右侧箭头 */
.titile-right{
width: 16rpx;
height: 36rpx;
}
.titile-right image{
width: 100%;
height: 100%;
}
/* 商品内容 */
.among-content{
/* padding: 0 14rpx; */
padding-left: 14rpx;
padding-right: 14rpx;
display: flex;
flex-wrap:wrap;
margin-bottom: 20rpx;
}
.tea-box{
width:340rpx;
height: 395rpx;
margin: 20rpx 11rpx 0;
}
.tea-img{
width: 100%;
height: 270rpx;
}
.tea-img image{
width: 100%;
height: 100%;
}
.tea-detail{
padding:0 20rpx;
}
.tea-name{
font-size: 30rpx;
hyphens: 60rpx;
line-height: 60rpx;
}
.tea-price{
font-size: 34rpx;
display: flex;
justify-content: space-between;
color: #ff3300;
}
.tea-shop{
width: 100rpx;
height: 40rpx;
}
.tea-shop image{
width: 100%;
height: 100%;
}
//-----------------------------
// 主页商品标题商品内容展示（数据）
teaamong:[
{
id: 1,
cid: 1001,
teatitle: "乌龙茶系列",
tealist: [
{ id: 1, teaname: "冠军乌龙茶 - 150g",num: '1', price: "1200.00", image: '../../imgs/index/good_pic1.png',cid: 1001},
{ id: 2, teaname: "18年老茶-150g", num: '1', price: "600.00", image: '../../imgs/index/good_pic1.png', cid: 1001 },
],
listshow: false,
},
{
id: 2,
cid: 1002,
teatitle: "红茶系列",
tealist: [
{ id: 7, teaname: "冠军乌龙茶 - 150g", num: '1',price: "1200.00", image: '../../imgs/index/good_pic1.png', cid: 1002 },
{ id: 8, teaname: "冠军乌龙茶 - 150g", num: '1', price: "1100.00", image: '../../imgs/index/good_pic1.png', cid: 1002 },
],
listshow: true,
},
{
id: 3,
cid: 1003,
teatitle: "花茶系列",
tealist: [
{ id: 7, teaname: "冠军乌龙茶 - 150g", num: '1', price: "1200.00", image: '../../imgs/index/good_pic1.png', cid: 1002 },
{ id: 8, teaname: "冠军乌龙茶 - 150g", num: '1', price: "1100.00", image: '../../imgs/index/good_pic1.png', cid: 1002 },
],
listshow: true,
},
{
id: 4,
cid: 1004,
teatitle: "绿茶系列",
tealist: [
{ id: 7, teaname: "冠军乌龙茶 - 150g", num: '1', price: "1200.00", image: '../../imgs/index/good_pic1.png', cid: 1002 },
{ id: 8, teaname: "冠军乌龙茶 - 150g", num: '1', price: "1100.00", image: '../../imgs/index/good_pic1.png', cid: 1002 },
],
listshow: true,
}
],
