夜光带你走进 微信小程序开发（四十二）擅长的领域

夜光序言：

 

世人笑我痴红尘，不过红尘恋伊人。

 

 

 

 
 
正文：
 
                                              以道御术 / 以术识道

 

 

 

 

/*夜光： pages/goods_list/goods_list.wxss */
.first_tab{
   .goods_item{
     display: flex;
     border-bottom: 1rpx solid #ccc;
     .goods_img_wrap{
       flex: 2;
       display: flex;
       justify-content: center;
       align-items: center;
       image{
         width: 70%;
       }
     }


     .goods_info_wrap{
       flex:3;
       display: flex;
       flex-direction: column;
       justify-content: space-around;
       .goods_name{
         display: flex;
         overflow: hidden;
         -webkit-box-orient: vertical;
         -webkit-line-clamp:5
       }
       .goods_price{
         color: var(--themeColor);
         font-size:32rpx;
       }
     }
   }

}

/*夜光： pages/goods_list/goods_list.wxss */
.first_tab .goods_item {
  display: flex;
  border-bottom: 1rpx solid #ccc;
}
.first_tab .goods_item .goods_img_wrap {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.first_tab .goods_item .goods_img_wrap image {
  width: 70%;
}
.first_tab .goods_item .goods_info_wrap {
  flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.first_tab .goods_item .goods_info_wrap .goods_name {
  display: flex;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
.first_tab .goods_item .goods_info_wrap .goods_price {
  color: var(--themeColor);
  font-size: 32rpx;
}

<!--pages/goods_list/goods_list.wxml-->
<SearchInput></SearchInput>

<!-- 监听一下事件 -->
<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange">
<!-- 如果第零项被选中的话，就显示什么呢 -->
<block wx:if="{{tabs[0].isActive}}">
   <view class="first_tab">
       <navigator class="goods_item">
           <!-- 左侧图片容器 -->
           <view class="goods_img_wrap">
               <image mode="widthFix" src="http://image1.suning.cn/uimg/b2c/newcatentries/0070134290-000000000149003877_1_800x800.jpg"></image>
           </view>
           <!-- 右侧商品容器 -->
           <view class="goods_info_wrap">
               <view class="goods_name">和道一文字 大快刀二十一工之一 刀柄与刀鞘为白色 简单朴素</view>
               <view class="goods_price">$1688</view>
           </view>
       </navigator>
              <navigator class="goods_item">
           <!-- 左侧图片容器 -->
           <view class="goods_img_wrap">
               <image mode="widthFix" src="http://image1.suning.cn/uimg/b2c/newcatentries/0070134290-000000000149003877_1_800x800.jpg"></image>
           </view>
           <!-- 右侧商品容器 -->
           <view class="goods_info_wrap">
               <view class="goods_name">和道一文字 大快刀二十一工之一 刀柄与刀鞘为白色 简单朴素</view>
               <view class="goods_price">$1688</view>
           </view>
       </navigator>
              <navigator class="goods_item">
           <!-- 左侧图片容器 -->
           <view class="goods_img_wrap">
               <image mode="widthFix" src="http://image1.suning.cn/uimg/b2c/newcatentries/0070134290-000000000149003877_1_800x800.jpg"></image>
           </view>
           <!-- 右侧商品容器 -->
           <view class="goods_info_wrap">
               <view class="goods_name">和道一文字 大快刀二十一工之一 刀柄与刀鞘为白色 简单朴素</view>
               <view class="goods_price">$1688</view>
           </view>
       </navigator>
   </view>
</block>

<block wx:elif="{{tabs[1].isActive}}">




</block>

<block wx:elif="{{tabs[2].isActive}}">




</block>

</Tabs>