小程序页面布局之单列、双列、三列、四列

最新推荐文章于 2024-09-07 01:53:51 发布

置顶哈库拉Ma塔塔

最新推荐文章于 2024-09-07 01:53:51 发布

阅读量4.3k

点赞数 5

分类专栏：小程序布局之多列布局文章标签：小程序 html flex

本文链接：https://blog.youkuaiyun.com/nononoCoder/article/details/106904515

版权

小程序布局之多列布局专栏收录该内容

1 篇文章

订阅专栏

在这里插入图片描述页面效果图如上所示，直接上代码！！！

html:

<view class="rowBox">
  <view wx:for="{{listData}}" wx:for-item="listDataItem">
    <!-- 单图 -->
    <view class="rowItem" wx:if="{{listDataItem.type==1}}">
      <image class="rowOne" wx:for="{{listDataItem.content}}" src="{{item.url}}"  mode="aspectFill"></image>
    </view>
    <!-- 双图 -->
    <view class="rowItem flexBetween" wx:if="{{listDataItem.type==2}}">
      <image class="rowTwo" wx:for="{{listDataItem.content}}" style="margin-right:{{index==1?'0':''}}" src="{{item.url}}" mode="aspectFill"></image>
    </view>
    <!-- 三图 -->
    <view class="rowItem flexBetween" wx:if="{{listDataItem.type==3}}">
      <image class="rowThreeLeft" src="{{listDataItem.content[0].url}}" mode="aspectFill"></image>
      <view class="rowThreeRight flexColumnBetween">
        <image class="rowThreeRightItem" style="margin-top:0" src="{{listDataItem.content[1].url}}" mode="aspectFill"></image>
        <image class="rowThreeRightItem" src="{{listDataItem.content[2].url}}" mode="aspectFill"></image>
      </view>
    </view>
    <!-- 四图 -->
    <view class="rowItem flexBetween" wx:if="{{listDataItem.type==4}}">
      <image class="rowFore" wx:for="{{listDataItem.content}}" style="margin-right:{{index==3?'0':''}}" src="{{item.url}}" mode="aspectFill"></image>
    </view>
  </view>
</view>

css:

page{background: #F0F0F6;color: #333;padding-bottom: 10rpx}
.rowBox{width: calc(100% - 24rpx);padding:0 12rpx}
.rowItem{width: 100%;margin-top: 12rpx}
.rowOne{width: 100%;height:240rpx;border-radius: 6rpx}

.rowTwo{width: 50%;height:240rpx;margin-right: 12rpx;border-radius: 6rpx}

.rowThreeLeft{width: 50%;height:240rpx;margin-right: 12rpx;border-radius: 6rpx}
.rowThreeRight{width: 50%;height:240rpx}
.rowThreeRightItem{width: 100%;height: 50%;margin-top: 10rpx;border-radius: 6rpx}

.rowFore{width: 25%;height:240rpx;margin-right: 12rpx;border-radius: 6rpx}
image{display: block}

app.wxss之flex布局

.flex{display: flex;align-items: center}
.flexBetween{display: flex;justify-content: space-between;align-items: center}
.flexAround{display: flex;justify-content: space-around;align-items: center}
.flexColumnAround{display: flex;flex-direction: column;justify-content: space-around}
.flexColumnCenter{display: flex;flex-direction: column; align-items: center;}
.flexColumnBetween{display: flex;flex-direction: column;justify-content: space-between}

js：

Page({
  data: {
    listData: [{
      type: 1,
      content: [{
        url: 'http://img0.imgtn.bdimg.com/it/u=1424239015,525755483&fm=26&gp=0.jpg'
      }]
    }, {
      type: 2,
      content: [{
        url: 'http://img2.imgtn.bdimg.com/it/u=3984473917,238095211&fm=26&gp=0.jpg'
      }, {
        url: 'http://img2.imgtn.bdimg.com/it/u=3984473917,238095211&fm=26&gp=0.jpg'
      }]
    }, {
      type: 3,
      content: [{
        url: 'http://img4.imgtn.bdimg.com/it/u=2229864841,4232235061&fm=26&gp=0.jpg',
      }, {
        url: 'http://img5.imgtn.bdimg.com/it/u=3053840139,4109911854&fm=26&gp=0.jpg',
      }, {
        url: 'http://img5.imgtn.bdimg.com/it/u=3053840139,4109911854&fm=26&gp=0.jpg',
      }]
    }, {
      type: 4,
      content: [{
        url: 'http://img4.imgtn.bdimg.com/it/u=3360834600,1404834512&fm=26&gp=0.jpg'
      }, {
        url: 'http://img4.imgtn.bdimg.com/it/u=3360834600,1404834512&fm=26&gp=0.jpg'
      }, {
        url: 'http://img4.imgtn.bdimg.com/it/u=3360834600,1404834512&fm=26&gp=0.jpg'
      }, {
        url: 'http://img4.imgtn.bdimg.com/it/u=3360834600,1404834512&fm=26&gp=0.jpg'
      }]
    }]
  },
  onLoad: function(options) {

  }
})

有用就点个赞吧！！！