微信 小程序布局 标题之二分列表

<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- 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,

}

],