夜光序言:
世人笑我癡紅塵,不過紅塵戀伊人。
正文:
以道御術 / 以術識道
/*夜光: 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>