代码展示：
使用flex布局模型和wx:for属性仿微信“钱包”页面实现九宫格
项目创建完毕之后，在根目录中会生成文件夹pages用于存放页面文件。一般来说首页默认命名为index，表示小程序运行的第一个页面；
将app.json文件内pages属性中的“pages/logs/logs”删除，并删除上一行末尾的逗号
删除utils文件夹及其内部所有内容。
删除pages文件夹下的logs目录及其内部所有内容
删除index.wxml和index.wxss中的全部代码
删除index.js中的代码 并输入page找到第二个选项按回车键让其自动补全函数
删除app.wxss中的全部代码
会自动补全以下代码：
删除app.js中的全部代码，并且输入关键词app
按回车键自动补全代码
小程序默认导航栏为黑底白字
需在index.json中自定义导航栏标题和背景颜色
{
"navigationBarTitleText": "钱包",
"navigationBarBackgroundColor": "#686F79" //灰色
}页面设计
顶端钱包状态栏
腾讯服务栏
/**index.wxss**/
.container{
height: 100vh;
background-color: silver;
display: flex;
flex-direction: column;
}
.topPanel{
height: 300rpx;
background-color: #686F79;
display: flex;
flex-direction: row; /*水平布局*/
}
/* 腾讯服务栏 */
.servicePanel{
min-height: 600rpx;
background-color: white;
margin: 20px 0; /*上下外边距20rpx 左右0*/
}
/* 第一行标题样式 */
.serviceTitle{
padding: 20rpx; /*四周内边距*/
border: 1rpx solid silver;
font-size: 30rpx;
color: gray;
}
/* 九宫格区域样式 */
.serviceBlocks{
display: flex;
flex-direction: row; /*水平布局*/
flex-wrap: wrap; /*允许换行*/
}<!--index.wxml-->
<view class='container'>
<view class='topPanel'>
</view>
<view class='servicePanel'>
<view class='serviceTitle'>腾讯服务</view>
<view class='serviceBlocks'></view>
</view>
</view>
当前效果如下图所示
面板1设计
代码片段修改
<!--index.wxml-->
<view class='container'>
<view class='topPanel'>
<view class='box1'>
<image src='/images/money.png'></image>
<text>收付款</text>
</view>
</view>
<view class='servicePanel'>
<view class='serviceTitle'>腾讯服务</view>
<view class='serviceBlocks'></view>
</view>
</view>
index.wxss代码片段
/**index.wxss**/
.container{
height: 100vh;
background-color: silver;
display: flex;
flex-direction: column;
}
.topPanel{
height: 300rpx;
background-color: #686F79;
display: flex;
flex-direction: row; /*水平布局*/
}
/* 腾讯服务栏 */
.servicePanel{
min-height: 600rpx;
background-color: white;
margin: 20px 0; /*上下外边距20rpx 左右0*/
}
/* 第一行标题样式 */
.serviceTitle{
padding: 20rpx; /*四周内边距*/
border: 1rpx solid silver;
font-size: 30rpx;
color: gray;
}
/* 九宫格区域样式 */
.serviceBlocks{
display: flex;
flex-direction: row; /*水平布局*/
flex-wrap: wrap; /*允许换行*/
}
/* 面板1方格样式 */
.box1{
display: flex;
flex-direction: column;
align-items: center;
width: 33%; /*宽度约占屏幕的1/3*/
height: 250rpx;
}
/* 面板1方格内图标样式 */
.box1 image{
width: 110rpx;
height: 110rpx;
margin: 20rpx; /*四周外边距均为20rpx*/
}
/* 方格内文本样式 */
.box1 text{
text-align: center;
color: white;
font-size: 35rpx;
}
设置面板2信用卡还款
WXML代码片段修改：
<view class='serviceBlocks'>
<view class='box2'>
<image src='/images/cardRepay.png'></image>
<text>信用卡还款</text>
</view>
</view>WXSS代码片段修改：
/* 方格内文本样式 */
.box1 text{
text-align: center;
color: white;
font-size: 35rpx;
}
/* 面板2：方格内图标 */
.box2{
border: 1rpx solid silver;
display: flex; /*flex布局模型*/
flex-direction: column; /*垂直布局*/
align-items: center; /*水平方向居中*/
justify-content: center; /*垂直方向居中*/
width: 33%; /*宽度约占屏幕的1/3*/
height: 230rpx;
}
/* 方格内图标 */
.box2 image{
width: 90rpx;
height: 90rpx;
}
/* 方格内文字 */
.box2 text{
font-size: 30rpx; /*字号为30rpx*/
}
逻辑实现
面板1逻辑实现
（1）使用动态数据展示方格
由于所有方格的内容布局都是统一的，可以考虑使用wx:for属性配合动态数组渲染全部列表项，以减少WXML页面的代码量
<view class='topPanel'>
<view class='box1' wx:for='{{array1}}' wx:for='array1_{{index}}'>
<image src='{{item.icon}}'></image>
<text>{{item.text}}</text>
</view>
</view>循环下来就是array1_0,array1_1,array1_2....
其中{{array1}}数组表示3个方格，方格区域的图标和文本分别命名为icon,text
{{item}} item是官方给的元素
item.属性名
item的属性写在page {data：{ array1：[ { icon:.... , text:.... } ] } }
完整代码：
app.json文件代码
{
"pages":[
"pages/index/index"
]
}
JSON文件-pages/index/index.json
{
"navigationBarTitleText": "钱包",
"navigationBarBackgroundColor": "#058b3d"
}WXML文件-pages/index/index.wxml
<!--index.wxml-->
<view class='container'>
<view class='topPanel'>
<view class='box1' wx:for='{{array1}}' wx:key='array1_{{index}}'>
<image src='{{item.icon}}'></image>
<text>{{item.text}}</text>
</view>
</view>
<view class='servicePanel'>
<view class='serviceTitle'>腾讯服务</view>
<view class='serviceBlocks'>
<view class='box2' wx:for='{{array2}}' wx:key='array2_{{index}}'>
<image src='{{item.icon}}'></image>
<text>{{item.text}}</text>
</view>
</view>
</view>
</view>
WXSS文件-pages/index/index.wxss文章来源：https://www.toymoban.com/news/detail-481641.html
/**index.wxss**/
.container{
height: 100vh;
background-color: rgb(69, 163, 66);
display: flex;
flex-direction: column;
}
.topPanel{
height: 300rpx;
background-color: #07a147;
display: flex;
flex-direction: row; /*水平布局*/
}
/* 腾讯服务栏 */
.servicePanel{
min-height: 600rpx;
background-color: white;
margin: 20px 0; /*上下外边距20rpx 左右0*/
}
/* 第一行标题样式 */
.serviceTitle{
padding: 20rpx; /*四周内边距*/
border: 1rpx solid silver;
font-size: 30rpx;
color: gray;
}
/* 九宫格区域样式 */
.serviceBlocks{
display: flex;
flex-direction: row; /*水平布局*/
flex-wrap: wrap; /*允许换行*/
}
/* 面板1方格样式 */
.box1{
display: flex;
flex-direction: column;
align-items: center;
width: 33%; /*宽度约占屏幕的1/3*/
height: 250rpx;
}
/* 面板1方格内图标样式 */
.box1 image{
width: 90rpx;
height: 90rpx;
margin: 25rpx; /*四周外边距均为20rpx*/
}
/* 方格内文本样式 */
.box1 text{
text-align: center;
color: white;
font-size: 35rpx;
}
/* 面板2：方格内图标 */
.box2{
border: 1rpx solid silver;
display: flex; /*flex布局模型*/
flex-direction: column; /*垂直布局*/
align-items: center; /*水平方向居中*/
justify-content: center; /*垂直方向居中*/
width: 32.8%; /*宽度约占屏幕的1/3*/
height: 230rpx;
}
/* 方格内图标 */
.box2 image{
width: 80rpx;
height: 80rpx;
}
/* 方格内文字 */
.box2 text{
font-size: 30rpx; /*字号为30rpx*/
}
JS文件-pages/index/index.js文章来源地址https://www.toymoban.com/news/detail-481641.html
// index.js
// 获取应用实例
Page({
/**
* 页面的初始数据
*/
data: {
array1:[
{
icon:'/images/money.png',
text:'首付款'
},
{ icon:'/images/balance.png',
text:'零钱\n0.00'
},
{ icon:'/images/cards.png',
text:'银行卡'
},
],
array2:[
{
icon:'/images/cardRepay.png',
text:'信用卡还款'
},
{
icon:'/images/mobileTopup.png',
text:'手机充值'
},
{
icon:'/images/wealth.png',
text:'理财通'
},
{
icon:'/images/utilities.png',
text:'生活缴费'
},
{
icon:'/images/qqCoins.png',
text:'Q币充值'
},
{
icon:'/images/publicService.png',
text:'城市服务'
},
{
icon:'/images/charity.png',
text:'腾讯公益'
},
{
icon:'/images/insurance.png',
text:'保险服务'
}
]
}
})到了这里，关于九宫格布局小程序-模仿微信钱包界面设计-基础入门的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
