小編給大家分享一下如何實現微信小程序九宮格，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！話不多說，直接上代碼：
.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;
}一些常見的盒子模型，直接復制粘貼就完了，簡潔明了
看完了這篇文章，相信你對如何實現微信小程序九宮格有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
