微信小程序实现九宫格显示（瀑布流样式）

最新推荐文章于 2024-01-30 15:08:25 发布

猴狲

最新推荐文章于 2024-01-30 15:08:25 发布

阅读量2.9k

点赞数 2

分类专栏：【微信小程序】文章标签：微信小程序九宫格瀑布流九宫格样式

本文链接：https://blog.csdn.net/sdfjasad/article/details/102547977

版权

【微信小程序】专栏收录该内容

21 篇文章 8 订阅

订阅专栏

实现效果如图：
在这里插入图片描述

在wxml中设置：

<view class="view_list">
    <view class="view_item">      <view class="view_type">        <navigator url="wenzi/wenzi" open-type="navigate" class="navigate_item">          <image src="../images/wenziicon.png" class="swiper_head" mode="aspectFit" /> 识文字        </navigator>      </view>    </view>
    <view class="view_item">      <view class="view_type">        <navigator url="shenfenzheng/shenfenzheng" open-type="navigate" class="navigate_item">          <image src="../images/shenfenzhengicon.png" class="swiper_head" mode="aspectFit" /> 身份证        </navigator>      </view>    </view>
    <view class="view_item">      <view class="view_type">        <navigator url="jiashizheng/jiashizheng" open-type="navigate" class="navigate_item">          <image src="../images/jiashizhengicon.png" class="swiper_head" mode="aspectFit" /> 驾驶证        </navigator>      </view>    </view>
    <view class="view_item">      <view class="view_type">        <navigator url="wupin/wupin" open-type="navigate" class="navigate_item">          <image src="../images/wupinicon.png" class="swiper_head" mode="aspectFit" /> 识物品        </navigator>      </view>    </view>
    <view class="view_item">      <view class="view_type">        <navigator url="zhiwu/zhiwu" open-type="navigate" class="navigate_item">          <image src="../images/zhiwuicon.png" class="swiper_head" mode="aspectFit" /> 识植物        </navigator>      </view>    </view>
    <view class="view_item">      <view class="view_type">        <navigator url="dongwu/dongwu" open-type="navigate" class="navigate_item">          <image src="../images/dongwuicon.png" class="swiper_head" mode="aspectFit" /> 识动物        </navigator>      </view>    </view>
    <view class="view_item">      <view class="view_type">        <navigator url="chexing/chexing" open-type="navigate" class="navigate_item">          <image src="../images/chexingicon.png" class="swiper_head" mode="aspectFit" /> 识车型        </navigator>      </view>    </view>
    <view class="view_item">      <view class="view_type">        <navigator url="yinhangka/yinhangka" open-type="navigate" class="navigate_item">          <image src="../images/yinhangkaicon.png" class="swiper_head" mode="aspectFit" /> 银行卡        </navigator>      </view>    </view>
    <view class="view_item">      <view class="view_type">        <navigator url="fanyi/fanyi" open-type="navigate" class="navigate_item">          <image src="../images/fanyiicon.png" class="swiper_head" mode="aspectFit" /> 翻译        </navigator>      </view>    </view>
  </view>

在wxss中设置代码

.view_list {  width: 95%;  height: 100%;  /* margin-top: 20rpx; */  column-count: 3;  /* 设置或检索对象的列与列之间的间隙为2px */  column-gap: 10rpx;}
.view_item {  width: 100%;  height: 250rpx;  position: relative;  display: inline-block;  /* display: flex; */  flex-direction: column;  align-items: center;  justify-content: center;}
.view_type {  width: 100%;  height: 100%;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;}
.navigate_item {  width: 130rpx;  height: 130rpx;  padding: 30rpx;  background-color: #2880fe;  color: white;  border-radius: 20rpx;  display: flex;  flex-direction: column;  align-items: center;}