微信小程序用 flex 实现九宫格

嵌入式小屋

发布于 2022-04-27 09:13:33

76300

代码可运行

文章被收录于专栏：嵌入式小屋的专栏嵌入式小屋的专栏

运行总次数：0

代码可运行

目标：把屏幕按九宫格的方式均分切块，为了方便扩展，增加了 scroll-view

九宫格效果如下：

超出九宫格的效果如下：

http://mpvideo.qpic.cn/0bc3yyac4aaatqafgxfxpjqvbrwdf3daalqa.f10004.mp4?

一. 在 js 文件的 data 中，增加 items

  data: {
    items: ['BLE', 'WIFI', 'NFC',
            'BLE', 'WIFI', 'NFC',
            'BLE', 'WIFI', 'NFC'
          ]
  },

二. 在 wxml 文件中，增加如下代码

<!-- 页面根 -->
<view class="pageRoot">
  <!-- 页面内容超出屏幕时可滑动 -->
  <scroll-view scroll-y="true">
    <view class="scrollView">
      <view class="content" wx:for="{{items}}" wx:key="index">
        <text>{{items[index]}}</text>
      </view>
    </view>
  </scroll-view>
</view>

•用 wx:for 遍历 data（js文件）中的 items，去生成页面中的每一个方格

三. 在 wxss 文件中做两个步骤

1.定义 scrollView

.scrollView {
  display: flex;       # 页面显示使用 flex
  flex-direction: row; # flex 方向为 行
  flex-wrap: wrap;    
  justify-content: space-between; # 两端对齐，方格之间等间隔
}

wrap：这里为：如果多个方格按一行放置，如果总长度没有超过行，就放置下一个方格，否则就换行放置，如下所示：

2. 定义每一个方格

.content {
  width: 33vw;            # 定义方格的宽度 为 屏幕宽度的 33 等分， 总共 100 份 
  height: 33vw;
  box-sizing: border-box;
  background-color: lightblue;
  color: whitesmoke;
  display: flex;          # 定义 方格中的内容
  flex-direction: row;
  align-items: center;     /* 子 view 垂直居中 */
  justify-content: center; 
  margin-top: 1px;
}