1---flex 伸縮佈局display: flex;
(伸縮佈局纔可以 將後續撐起的高度,再次分配到image)
2 --方向是水平方向flex-direction: row;
不能有相關垂直屬性加入(align-items: center;加入後不再分配高度)
3--image需要包裹一層view view可以設置寬度,不設置高度
image有默認高度240px 需要包裹一層view 然後設置image高度100%
相關代碼
<!--1.2. 設置容器flex 方向row -->
<view style="display: flex;flex-direction: row;" >
<!--3. image包裹一層view -->
<view style="width: 26%">
<image style="width: 100%;height: 100%;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548218630394&di=8a330378ca66ccd466ab6ad5b3726560&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FZZ5EGyuUCp9hBPk6_s4Ehg%3D%3D%2F5727171351132208489.jpg" >
</image>
</view>
<!-- image適應根據下邊這個高度, -->
<view style="margin-left: 10px; width: 60%;flex=1;">
<text style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">推薦 </text>
<text style="color: red;margin-top: 10px;" >推薦推薦推薦推薦 </text>
<text style="color: #808080; font-size: 13px;">
推薦推薦推薦 </text>
</view>
</view>
上邊代碼可能會中間文字有點問題 這個規範了文字行數,
<!-- list bottom -->
<view wx:for="{{contentList}}" wx:key="{{index}}" style="box-sizing: border-box; background-color: white; display: flex;flex-direction: row;padding: 10px;border-bottom: 1px solid gray;" >
<view style="width: 26%;" >
<image style="width: 100%;height: 100%;" src="{{item.imgUrl}}" >
</image>
</view>
<view style="width: 30;margin-left: 5px; overflow: hidden;text-overflow: ellipsis;flex: 1;" hover-class="none" hover-stop-propagation="false">
<text style="white-space: nowrap;" >{{item.title}}</text>
<text style="color: red; white-space: nowrap;margin-top:5px;">
價格:¥{{item.price}}</text>
<text style="font-size: 13px;color: gray; white-space: nowrap;" >
{{item.langer}}</text>
</view>
<view style="display: flex;flex-direction: row;align-items: center;" hover-class="none" hover-stop-propagation="false">
<image style="width: 15px;height: 15px;float: right;" src="../../icons/nav.png" > </image>
<text style="color: red;font-size: 12px;float: right;margin: 0 auto;">1000m</text>
</view>
</view>