image自適應高度

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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章