小编给大家分享一下如何实现微信小程序九宫格，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！话不多说，直接上代码：

.wxml

<view class='user-box' > <view class='ctn'> <view class='list' wx:for="{{4}}" wx:key data-index="{{index}}"> <image mode="widthFix" src='/images/dfk.png'></image> <text>退换/售后</text> <view>查看明细</view> </view> </view></view><view class='user-box' > <view class='ctn'> <view class='list' wx:for="{{4}}" wx:key data-index="{{index}}"> <image mode="widthFix" src='/images/dfk.png'></image> <text>退换/售后</text> </view> </view></view><view class='user-box' > <view class='ctn cuin'> <view class='list' wx:for="{{6}}" wx:key data-index="{{index}}" > <image mode="widthFix" src='/images/dfk.png'></image> <text>退换/售后</text> </view> </view></view><view class='user-box' > <view class='ctn'> <view class='list' wx:for="{{4}}" wx:key data-index="{{index}}" > <image mode="widthFix" src='/images/dfk.png'></image> <text >退换/售后</text> <view>查看明细</view> </view> </view></view><view class='user-box' > <view class='ctn'> <view class='list' wx:for="{{4}}" wx:key data-index="{{index}}"> <span class="user-span">99+</span> <image mode="widthFix" class="user-image" src='/images/dfk.png'></image> <text>退换/售后</text> </view> </view></view>

.wxss

page{ background-color: #f7f7f7;}view{ box-sizing: border-box;}.user-box{ width: 100%;float: left;overflow: hidden;background-color: #fff; }.user-box .ctn{ display: flex;justify-content:flex-start;align-items: center;flex-wrap:wrap;}.user-box .ctn .list{ text-align: center; width: 25%; padding:20rpx 0 20rpx 0; position: relative;}.user-box .ctn .list image{ width: 50rpx; height: auto;}.user-box .ctn .list text{ display: block; font-size: 24rpx; padding-top: 10rpx;} .user-box .ctn .list view{font-size: 16rpx;color: #ccc;position: relative;top: 4rpx;}.cuin view:nth-child(6){ border-top: 1px solid #ddd;}.cuin view:nth-child(5){ border-right: 1px solid #ddd; border-top: 1px solid #ddd;}.cuin view:nth-child(4){ border-right: 1px solid #ddd; border-top: 1px solid #ddd; position: relative;}.cuin view:nth-child(2){ border-right: 1px solid #ddd;}.cuin view:nth-child(1){ border-right: 1px solid #ddd;}.user-span{ font-size: 18rpx; height: 28rpx; display: flex; align-items: center; background-color: #e54d42; color: #fff; padding: 0 8rpx 4rpx 10rpx; border-radius: 200rpx; position: absolute; top: 10rpx; right: 20rpx;}

一些常见的盒子模型，直接复制粘贴就完了，简洁明了

看完了这篇文章，相信你对如何实现微信小程序九宫格有了一定的了解，想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！