微信小程序个人中心、我的界面、自定义顶部状态栏、页面监听跳转、简单界面布局（示例一）
微信小程序个人中心、我的界面，自定义顶部状态栏，实现滚动隐藏显示状态信息，界面简单，代码粘贴即用。更多微信小程序界面示例，请进入我的主页哦！
1、js代码
Page({
/**
* 页面的初始数据
*/
data: {
show: false,
barHeight: 20, // 顶部状态栏高度
navBarHeight: 66, // 顶部高度
tabList: [{
id: '1',
src: '../../images/rank.png',
title: '菜单一'
},
{
id: '2',
src: '../../images/tv.png',
title: '菜单二'
},
{
id: '3',
src: '../../images/rank.png',
title: '菜单三'
},
{
id: '4',
src: '../../images/tv.png',
title: '菜单四'
}
],
},
// 头像监听
headClick() {
wx.showToast({
title: '点击了头像',
icon: 'none'
})
wx.navigateTo({
url: '需要跳转的链接路径',
})
},
// 查看详情监听
detailClick() {
wx.showToast({
title: '查看详情',
icon: 'none'
})
wx.navigateTo({
url: '需要跳转的链接路径',
})
},
// 更多实例
shareClick() {
wx.showToast({
title: '分享更多示例',
icon: 'none'
})
wx.navigateTo({
url: '需要跳转的链接路径',
})
},
// 二级菜单监听
tabClick(e) {
var info = e.currentTarget.dataset.item;
wx.showToast({
title: info.title,
icon: 'none'
})
switch (info.id) {
case '1':
wx.navigateTo({
url: '菜单一需要跳转的链接路径',
})
break;
case '2':
wx.navigateTo({
url: '菜单二需要跳转的链接路径',
})
break;
case '3':
wx.navigateTo({
url: '菜单三需要跳转的链接路径',
})
break;
default:
wx.navigateTo({
url: '菜单四需要跳转的链接路径',
})
break;
}
},
// 基本信息
basicClick() {
wx.showToast({
title: '基本信息监听',
icon: 'none'
})
wx.navigateTo({
url: '需要跳转的链接路径',
})
},
// 匿名反馈
feedbackClick() {
wx.showToast({
title: '匿名反馈监听',
icon: 'none'
})
wx.navigateTo({
url: '需要跳转的链接路径',
})
},
// 关于我们
aboutClick() {
wx.showToast({
title: '关于我们监听',
icon: 'none'
})
wx.navigateTo({
url: '需要跳转的链接路径',
})
},
// 页面滚动监听
onPageScroll(e) {
if (e.scrollTop > 60) {
this.setData({
show: true
})
} else {
this.setData({
show: false
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
var that = this;
// 胶囊信息
var menu = wx.getMenuButtonBoundingClientRect();
wx.getSystemInfo({
success(res) {
that.setData({
barHeight: res.statusBarHeight,
navBarHeight: menu.top + menu.height
})
}
})
},
})
2、wxml代码
<!-- 顶部状态栏 -->
<view class="bar-box" style="height: {
{
navBarHeight}}px;">
<view class="level" style="margin-top: {
{
barHeight}}px;">
<view class="level bar" bindtap="headClick" wx:if="{
{show}}">
<image class="top-head" src="../../images/avatar.png" mode="widthFix"></image>
<view class="welcome">
<text class="nick">JefferyTan</text>
<text class="acount">189****8888</text>
</view>
</view>
<view class="bar-title" wx:else>个人中心</view>
</view>
</view>
<view class="head-box" style="padding-top: {
{
navBarHeight+20}}px;">
<view class="level" bindtap="headClick">
<image class="top-head" src="../../images/avatar.png" mode="widthFix"></image>
<view class="level head-right">
<view class="welcome">
<text class="nick" style="font-size: 30rpx;">JefferyTan</text>
<text class="acount" style="font-size: 28rpx;">189****8888</text>
</view>
<view class="level set-center">已认证</view>
</view>
</view>
<view class="level share-box" bindtap="detailClick">
<view>
<view class="money">
<text>存款</text>
<text class="money-text">￥1000000.00</text>
</view>
<view class="share-text">开启通往成功的道路！</view>
</view>
<view class="share-btn">查看详情</view>
</view>
</view>
<view class="level sign-box">
<view>8000+ 人关注</view>
<view>1000+ 人收藏</view>
</view>
<view class="more-box" bindtap="shareClick">分享更多示例，关注我哦，进我主页，共同学习小程序的开发呦！</view>
<!-- 二级菜单 -->
<view class="level tab-box">
<block wx:for="{
{tabList}}" wx:for-index="index" wx:for-item="item" wx:key="item">
<view class="tab-list" bindtap="tabClick" data-item="{
{item}}">
<image class="tab-img" src="{
{item.src}}" mode="widthFix"></image>
<view class="tab-text">{
{item.title}}</view>
</view>
</block>
</view>
<view class="white-box">
<button class="row" style="width: 100%;" bindtap="basicClick">
<view class="left">
<icon type="success" size="16" color="#2979ff"></icon>
<text class="text">基本信息</text>
</view>
<image class="right" src="../../images/right.png" mode="widthFix"></image>
</button>
<button class="row" style="width: 100%;" bindtap="feedbackClick">
<view class="left">
<icon type="success" size="16" color="#2979ff"></icon>
<text class="text">匿名反馈</text>
</view>
<image class="right" src="../../images/right.png" mode="widthFix"></image>
</button>
<button class="row" style="width: 100%;" bindtap="aboutClick">
<view class="left">
<icon type="success" size="16" color="#2979ff"></icon>
<text class="text">关于我们</text>
</view>
<image class="right" src="../../images/right.png" mode="widthFix"></image>
</button>
</view>
<view class="white-box">
<button open-type="share" class="row" style="width: 100%;">
<view class="left">
<icon type="success" size="16" color="#2979ff"></icon>
<text class="text">分享好友</text>
</view>
<image class="right" src="../../images/right.png" mode="widthFix"></image>
</button>
<button open-type="contact" class="row" style="width: 100%;border-bottom: none;">
<view class="left">
<icon type="success" size="16" color="#2979ff"></icon>
<text class="text">在线客服</text>
</view>
<image class="right" src="../../images/right.png" mode="widthFix"></image>
</button>
</view>
<view class="white-box">
<button class="row" style="width: 100%;border-bottom: none;">
<view class="left">
<icon type="success" size="16" color="#2979ff"></icon>
<text class="text">当前版本</text>
</view>
<view class="right" style="text-align: center;">8.8.8</view>
</button>
</view>
<view class="copy">
<text>©分享更多示例·请进我主页·点赞加关注·谢谢呦</text>
</view>
3、wxss代码
page {
background-color: #f1f1f1;
}
.level {
display: flex;
align-items: center;
}
/* 状态栏 */
.bar-box {
background-color: #2979ff;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
padding: 20rpx 0;
}
.bar {
width: 80%;
margin-right: 30%;
margin-top: 1.5%;
margin-left: 20rpx;
}
.bar-title {
margin-top: 1.5%;
margin-left: 20rpx;
text-align: center;
font-size: 34rpx;
color: white;
}
.top-head {
width: 15%;
border-radius: 50%;
background-color: white;
}
.welcome {
display: flex;
flex-direction: column;
margin-left: 20rpx;
color: white;
}
.nick {
font-size: 28rpx;
font-weight: bold;
}
.acount {
font-size: 22rpx;
margin-top: 5rpx;
}
.head-box {
background-color: #2979ff;
padding: 0 20rpx;
}
.head-right {
width: 85%;
align-items: flex-start;
justify-content: space-between;
}
.set-center {
background-color: #19be6b;
color: white;
border-radius: 50rpx;
font-size: 26rpx;
padding: 5rpx 20rpx;
}
.share-box {
justify-content: space-between;
margin-top: 8%;
background-color: rgb(65, 64, 64);
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
padding: 20rpx;
}
.money {
font-size: 30rpx;
color: rgb(248, 201, 70);
}
.money-text {
padding-left: 20rpx;
}
.share-text {
padding-top: 10rpx;
font-size: 24rpx;
color: rgba(248, 212, 112, 0.479);
}
.share-btn {
background-color: rgb(248, 201, 70);
color: rgb(54, 54, 54);
border-radius: 50rpx;
font-size: 26rpx;
padding: 5rpx 15rpx 8rpx 15rpx;
}
.sign-box {
margin: 0 20rpx;
padding: 30rpx 20rpx;
font-size: 30rpx;
color: gray;
justify-content: space-around;
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
background-color: white;
}
.more-box {
border-top-right-radius: 50rpx;
border-bottom-left-radius: 50rpx;
background-color: #fcbd71;
padding: 5% 30rpx;
font-size: 30rpx;
margin: 20rpx;
color: white;
}
/* 二级菜单 */
.tab-box {
margin: 20rpx;
background-color: white;
box-shadow: 0 0 5rpx 5rpx #f1f1f1;
padding: 30rpx 20rpx;
border-radius: 20rpx;
}
.tab-list {
flex: 1;
text-align: center;
color: gray;
}
.tab-img {
width: 50%;
}
.tab-text {
font-size: 30rpx;
margin: 5rpx 0;
}
.white-box {
background-color: white;
margin: 20rpx;
border-radius: 20rpx;
padding: 0 20rpx;
}
.row {
display: flex;
align-items: center;
padding: 36rpx 10rpx;
font-size: 30rpx;
font-weight: inherit;
background-color: rgba(0, 0, 0, 0);
border-bottom: 1rpx solid #f1f1f1;
}
.row::after {
border: none;
}
.text {
margin-left: 15rpx;
color: #636262;
}
.left {
width: 90%;
text-align: left;
display: flex;
align-items: center;
color: rgb(59, 59, 59);
}
.right {
width: 10%;
text-align: right;
color: rgb(148, 147, 147);
}
/* 商标 */
.copy {
padding: 30rpx;
text-align: center;
}
.copy text {
font-size: 25rpx;
color: gray
}
4、json代码
{
"usingComponents": {
},
"navigationStyle": "custom"
}
更多微信小程序示例的分享，请进入我的主页查看哦。。。