问问微信小程序如何使图片四宫格排列并与滑动栏在同一行

Question

问问微信小程序如何使上方图片四宫格排列并与滑动栏在同一行，这个困扰我好久了，刚刚学很多东西都很浅显，代码附上：

 
    
 
 
    
 

<view>学号</view>
<view>班级</view>
<view>宿舍号</view>

Answer 1

我引用ChatGPT作答：
要实现微信小程序中图片的四宫格排列，并且与左侧竖向滑动栏在同一行，可以使用flex布局来实现。具体的代码如下：
html

<view class="container">
  <view class="sidebar"> <!-- 左侧竖向滑动栏 -->
    <!-- ... -->
  </view>
  <view class="content">
    <view class="row">
      <view class="cell">
        <image src="图片1"></image>
      </view>
      <view class="cell">
        <image src="图片2"></image>
      </view>
      <view class="cell">
        <image src="图片3"></image>
      </view>
      <view class="cell">
        <image src="图片4"></image>
      </view>
    </view>
    <view class="row">
      <view class="cell">
        <image src="图片5"></image>
      </view>
      <view class="cell">
        <image src="图片6"></image>
      </view>
      <view class="cell">
        <image src="图片7"></image>
      </view>
      <view class="cell">
        <image src="图片8"></image>
      </view>
    </view>
    <!-- ... -->
  </view>
</view>

css

.container {
  display: flex; /* 使用flex布局 */
}

.sidebar {
  width: 25%; /* 左侧竖向滑动栏宽度 */
  height: 100vh; /* 左侧竖向滑动栏高度 */
}

.content {
  width: 75%; /* 右侧图片宫格区域宽度 */
  display: flex; /* 右侧图片宫格区域使用flex布局 */
  flex-wrap: wrap; /* 自动换行 */
  align-content: flex-start; /* 对齐方式：顶部对齐 */
}

.row {
  width: 100%; /* 图片宫格行宽度 */
  display: flex; /* 图片宫格行使用flex布局 */
  justify-content: space-between; /* 对齐方式：两端对齐 */
  align-items: stretch; /* 对齐方式：默认值，拉伸填满高度 */
  height: 100vh; /* 图片宫格行高度 */
}

.cell {
  width: 23%; /* 图片宫格单元格宽度 */
  height: calc(50% - 5px); /* 图片宫格单元格高度 */
  margin-bottom: 5px; /* 图片宫格单元格之间的间距 */
  display: flex; /* 图片宫格单元格使用flex布局 */
  justify-content: center; /* 对齐方式：水平居中 */
  align-items: center; /* 对齐方式：垂直居中 */
}

其中，使用flex布局实现左侧竖向滑动栏和右侧图片宫格区域在同一行，并使用flex-wrap属性实现右侧图片宫格区域自动换行。对于图片宫格的每个单元格，使用calc函数计算高度。