• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
<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,
}
],
 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序(3) 模糊搜索发布时间:2022-07-18
下一篇:
小程序iphone蒙层滚动穿透发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap