码迷，mamicode.com
首页 > 微信 > 详细

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

时间：2017-09-14 14:48:52      阅读：397      评论：0      收藏：0      [点我收藏+]

标签：隐藏   tle   bind   列表   title   name   布局   tap   show   

<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;
">white;
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,
}
],
 

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

标签：隐藏   tle   bind   列表   title   name   布局   tap   show   

原文地址：http://www.cnblogs.com/dianzan/p/7520342.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！