微信小程序实现九宫图布局

html+css 1136 0 2023-04-10

微信小程序实现九宫图布局

九宫图相信大家都见过了,看下效果图:


下面是实现代码:

<view class="grid-list">
  <view class="grid-item" wx:for="{{gridList}}" wx:key="index">
    <text>{{item}}</text>
  </view>
</view>

.grid-list{
  display: flex;
  flex-wrap: wrap;
  border-left: 1rpx solid #efefef;
  border-top: 1rpx solid #efefef;
}
.grid-item{
  width: 33.33%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
  box-sizing: border-box;
}

上一篇:外部引用CSS的两种方式link和@import的区别

下一篇:微信小程序实现两张图片并排一行显示

讨论数量:0

请先登录再发表讨论。 2024-10-14

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链