微信小程序個(gè)人中心、我的界面、自定義頂部狀態(tài)欄、頁面監(jiān)聽跳轉(zhuǎn)、簡單界面布局（示例一）

微信小程序個(gè)人中心、我的界面，自定義頂部狀態(tài)欄，實(shí)現(xiàn)滾動隱藏顯示狀態(tài)信息，界面簡單，代碼粘貼即用。更多微信小程序界面示例，請進(jìn)入我的主頁哦！

1、js代碼

Page({
    /**
     * 頁面的初始數(shù)據(jù)
     */
    data: {
        show: false,
        barHeight: 20, //  頂部狀態(tài)欄高度
        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: '菜單四'
            }
        ],
    },
    // 頭像監(jiān)聽
    headClick() {
        wx.showToast({
            title: '點(diǎn)擊了頭像',
            icon: 'none'
        })
        wx.navigateTo({
            url: '需要跳轉(zhuǎn)的鏈接路徑',
        })
    },
    // 查看詳情監(jiān)聽
    detailClick() {
        wx.showToast({
            title: '查看詳情',
            icon: 'none'
        })
        wx.navigateTo({
            url: '需要跳轉(zhuǎn)的鏈接路徑',
        })
    },
    // 更多實(shí)例
    shareClick() {
        wx.showToast({
            title: '分享更多示例',
            icon: 'none'
        })
        wx.navigateTo({
            url: '需要跳轉(zhuǎn)的鏈接路徑',
        })
    },
    // 二級菜單監(jiān)聽
    tabClick(e) {
        var info = e.currentTarget.dataset.item;
        wx.showToast({
            title: info.title,
            icon: 'none'
        })
        switch (info.id) {
            case '1':
                wx.navigateTo({
                    url: '菜單一需要跳轉(zhuǎn)的鏈接路徑',
                })
                break;
            case '2':
                wx.navigateTo({
                    url: '菜單二需要跳轉(zhuǎn)的鏈接路徑',
                })
                break;
            case '3':
                wx.navigateTo({
                    url: '菜單三需要跳轉(zhuǎn)的鏈接路徑',
                })
                break;
            default:
                wx.navigateTo({
                    url: '菜單四需要跳轉(zhuǎn)的鏈接路徑',
                })
                break;
        }
    },
    // 基本信息
    basicClick() {
        wx.showToast({
            title: '基本信息監(jiān)聽',
            icon: 'none'
        })
        wx.navigateTo({
            url: '需要跳轉(zhuǎn)的鏈接路徑',
        })
    },
    // 匿名反饋
    feedbackClick() {
        wx.showToast({
            title: '匿名反饋監(jiān)聽',
            icon: 'none'
        })
        wx.navigateTo({
            url: '需要跳轉(zhuǎn)的鏈接路徑',
        })
    },
    // 關(guān)于我們
    aboutClick() {
        wx.showToast({
            title: '關(guān)于我們監(jiān)聽',
            icon: 'none'
        })
        wx.navigateTo({
            url: '需要跳轉(zhuǎn)的鏈接路徑',
        })
    },
    // 頁面滾動監(jiān)聽
    onPageScroll(e) {
        if (e.scrollTop > 60) {
            this.setData({
                show: true
            })
        } else {
            this.setData({
                show: false
            })
        }
    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
     */
    onReady() {
        var that = this;
        // 膠囊信息
        var menu = wx.getMenuButtonBoundingClientRect();
        wx.getSystemInfo({
            success(res) {
                that.setData({
                    barHeight: res.statusBarHeight,
                    navBarHeight: menu.top + menu.height
                })
            }
        })
    },
})

2、wxml代碼

<!-- 頂部狀態(tài)欄 -->
<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>個(gè)人中心</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">已認(rèn)證</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+ 人關(guān)注</view>
    <view>1000+ 人收藏</view>
</view>
<view class="more-box" bindtap="shareClick">分享更多示例，關(guān)注我哦，進(jìn)我主頁，共同學(xué)習(xí)小程序的開發(fā)呦！</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">關(guān)于我們</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">當(dāng)前版本</text>
        </view>
        <view class="right" style="text-align: center;">8.8.8</view>
    </button>
</view>
<view class="copy">
    <text>?分享更多示例·請進(jìn)我主頁·點(diǎn)贊加關(guān)注·謝謝呦</text>
</view>

3、wxss代碼

page {
    background-color: #f1f1f1;
}

.level {
    display: flex;
    align-items: center;
}

/* 狀態(tài)欄 */
.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);
}

/* 商標(biāo) */
.copy {
    padding: 30rpx;
    text-align: center;
}

.copy text {
    font-size: 25rpx;
    color: gray
}

4、json代碼

{
    "usingComponents": {},
    "navigationStyle": "custom"
}

更多微信小程序示例的分享，請進(jìn)入我的主頁查看哦。。。文章來源地址http://www.zghlxwxcb.cn/news/detail-509336.html

到了這里，關(guān)于微信小程序個(gè)人中心、我的界面（示例二）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！