微信小程序个人中心、我的界面,九宫格简单布局(示例四)
微信小程序个人中心、我的界面,超简洁的九宫格界面布局,代码粘贴即用。更多微信小程序界面示例,请进入我的主页哦!
1、js代码
javascript
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代码
xml
<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代码
css
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代码
javascript
{
"usingComponents": {},
"navigationBarTitleText": "我的界面",
"navigationBarBackgroundColor": "#44ADFB"
}
更多微信小程序示例的分享,请进入我的主页查看哦。。。