码迷,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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!