微信小程序个人中心、我的界面，九宫格简单布局（示例四）

微信小程序个人中心、我的界面，超简洁的九宫格界面布局，代码粘贴即用。更多微信小程序界面示例，请进入我的主页哦！

1、js代码

Page({/*** 页面的初始数据*/data: {imgPath: '',menuList: [[{'title': '功能一','icon': 'success','iconColor': '#dd6161'},{'title': '功能二','icon': 'success_no_circle','iconColor': 'orange'},{'title': '功能三','icon': 'info','iconColor': '#19be6b'}],[{'title': '功能四','icon': 'warn','iconColor': '#f29100'},{'title': '功能五','icon': 'waiting','iconColor': '#909399'},{'title': '功能六','icon': 'cancel','iconColor': '#606266'}],[{'title': '功能七','icon': 'download','iconColor': 'purple'},{'title': '功能八','icon': 'search','iconColor': '#18b566'},{'title': '功能九','icon': 'clear','iconColor': '#f29100'},],],},// 功能监听clickBtn(e) {let tag = e.currentTarget.dataset.id;console.log('点击信息', tag)},// 菜单监听menuClick(e) {let tab = e.currentTarget.dataset.item;console.log('点击信息', tab)},// 头像切换avatarClick(e) {this.setData({imgPath: e.detail.avatarUrl})console.log('点击信息',e.detail.avatarUrl)}
})

2、wxml代码

<view class="top-box"><block wx:if="{{imgPath==''}}"><button class="avatar center" bindchooseavatar="avatarClick" open-type="chooseAvatar">头像</button></block><block wx:else><view class="center"><image class="avatar" src="{{imgPath}}" mode="widthFix" /></view></block><view class="nick center">三脚猫的喵</view>
</view>
<view class="center-box center"><text bind:tap="clickBtn" data-id="0">功能一</text><text>|</text><text bind:tap="clickBtn" data-id="1">功能二</text>
</view>
<!-- 菜单 -->
<view><block wx:for="{{menuList}}" wx:key="itemA" wx:for-item="itemA" wx:for-index="indexA"><view class="row-list"><block wx:for="{{itemA}}" wx:key="item" wx:for-item="item" wx:for-index="index"><view class="tab-col {{(index==1 || index==4 || index==7)?'border':''}}" bind:tap="menuClick" data-item="{{item}}"><icon class="icon-item" type="{{item.icon}}" size="30" color="{{item.iconColor}}"></icon><text>{{item.title}}</text></view></block></view></block>
</view>

3、wxss代码

page {font-size: 32rpx;background-color: #F1F1F1;
}.avatar {width: 140rpx;height: 140rpx;border-radius: 120rpx;padding: 0;font-size: 32rpx;
}.top-box {background-color: #44ADFB;padding-bottom: 60rpx;border-radius: 0 0 30% 30%;
}.center {display: flex;align-items: center;flex-direction: row;justify-content: center;
}.nick {margin: 20rpx 0;font-size: 34rpx;color: white;
}.center-box {margin-top: -40rpx;color: #525151;
}.center-box text {background-color: white;padding: 20rpx 25rpx;text-align: center;
}.center-box text:nth-child(1) {border-radius: 50rpx 0 0 50rpx;
}.center-box text:nth-child(2) {color: #44ADFB;
}.center-box text:nth-child(3) {border-radius: 0 50rpx 50rpx 0;
}.row-list {display: flex;flex-direction: row;text-align: center;
}.tab-col {width: 33.33%;display: flex;flex-direction: column;align-items: center;padding: 30rpx 0;border-bottom: 1rpx solid #FFFFFF;color: #525151;
}.icon-item {margin-bottom: 15rpx;
}.border {border-left: 1rpx solid #FFFFFF;border-right: 1rpx solid #FFFFFF;
}

4、json代码

{"usingComponents": {},"navigationBarTitleText": "我的界面","navigationBarBackgroundColor": "#44ADFB"
}

更多微信小程序示例的分享，请进入我的主页查看哦。。。