微信小程序----Maide List（图文列表）（flex布局实现MUI的图文列表）

Rattenking

发布于 2021-02-01 11:02:10

1.1K0

发布于 2021-02-01 11:02:10

文章被收录于专栏：Rattenking

效果图

WXML

<view class="tui-list-box">
  <view class="tui-list-head">图在左边</view>
  <view class="tui-gallery-list" wx:for="{{galleryList}}" wx:key="navList1">
    <image class="gallery-img" src="{{item.image}}"></image>
    <view class="gallery-box gallery-left">
      <text class="gallery-name">{{item.title}}</text>
      <text class="gallery-detail">{{item.detail}}</text>
    </view>
  </view>
</view>
<view class="tui-list-box">
  <view class="tui-list-head">图在右边</view>
  <view class="tui-gallery-list" wx:for="{{galleryList}}" wx:key="navList2">
    <image class="gallery-img" style="order:2;" src="{{item.image}}"></image>
    <view class="gallery-box gallery-right">
      <text class="gallery-name">{{item.title}}</text>
      <text class="gallery-detail">{{item.detail}}</text>
    </view>
  </view>
</view>
<view class="tui-list-box">
  <view class="tui-list-head">图在左边，右侧箭头</view>
  <view class="tui-gallery-list tui-youjiantou" wx:for="{{galleryList}}" wx:key="navList3">
    <image class="gallery-img" src="{{item.image}}"></image>
    <view class="gallery-box gallery-left gallery-right">
      <text class="gallery-name">{{item.title}}</text>
      <text class="gallery-detail">{{item.detail}}</text>
    </view>
  </view>
</view>
<view class="tui-list-box-raduis">
  <view class="tui-list-head">圆角列表</view>
  <view class="tui-gallery-list" wx:for="{{galleryList}}" wx:key="navList4">
    <image class="gallery-img" style="order:2;" src="{{item.image}}"></image>
    <view class="gallery-box gallery-right">
      <text class="gallery-name">{{item.title}}</text>
      <text class="gallery-detail">{{item.detail}}</text>
    </view>
  </view>
</view>

WXSS

.tui-gallery-list{
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gallery-img{
  width: 150rpx;
  height: 90rpx;
  flex: 0 0 auto;
}
.gallery-box{
  height: 90rpx;
  overflow: hidden;
}
.gallery-name{
  display: block;
  height: 50rpx;
  line-height: 50rpx;
  overflow: hidden;
  font-size: 35rpx;
}
.gallery-detail{
  display: block;
  height: 40rpx;
  line-height: 40rpx;
  overflow: hidden;
  font-size: 30rpx;
  color: #8f8f94;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.gallery-left{padding-left: 10px;}
.gallery-right{padding-right: 10px;}

总结

1、使用flex进行布局要注意兼容性，所以采用：display: -webkit-flex;display: flex; 2、为了保证每排三个图标的两对对齐，采用：justify-content: space-between; 3、order的值的大小，决定着该子元素的位置； 4、每个子元素设置flex: 0 0 auto;否则某个子元素超出，会改变其他元素大小！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/02/22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

auto