自定义微信小程序个人中心顶部状态栏，体验更顺滑的界面交互！

前端

2023-01-10 02:21:17

自定义微信小程序个人中心顶部状态栏，实现滚动隐藏状态信息

引言

在微信小程序中，个人中心页面通常包含一些基本信息，例如用户名、头像、关注数等。当用户向下滚动页面时，这些信息可能会被内容遮挡，从而影响用户体验。为了解决这一问题，我们可以自定义顶部状态栏，使其在滚动时自动隐藏或显示，让界面更简洁清爽。

步骤一：准备工作

确保拥有微信小程序开发环境，并安装必要的工具。
创建一个新的微信小程序项目或选择一个现有的项目进行修改。

步骤二：自定义顶部状态栏

在小程序根目录的app.json文件中，添加以下代码：

"window": {
  "navigationBarBackgroundColor": "#ffffff", // 状态栏背景颜色
  "navigationBarTextStyle": "black", // 状态栏文字颜色
  "navigationBarTitleText": "个人中心", // 状态栏标题
  "navigationBarCapsule": true // 是否显示胶囊按钮
}

步骤三：添加滚动事件监听

在小程序根目录的pages.json文件中，找到要自定义顶部状态栏的页面，添加以下代码：

{
  "path": "pages/index/index",
  "style": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "个人中心",
    "navigationBarCapsule": true
  },
  "usingComponents": {
    "navigationBar": "/components/navigation-bar/index"
  }
}

步骤四：创建自定义顶部状态栏组件

在小程序目录下创建components文件夹。
在components文件夹下创建navigation-bar文件夹。
在navigation-bar文件夹下创建index.json、index.wxml和index.wxss文件。
在index.json文件中添加：

{
  "component": true,
  "usingComponents": {}
}

在index.wxml文件中添加：

<view class="navigation-bar">
  <view class="navigation-bar__left">
    <button bindtap="goBack">
      <image src="../../images/back.png" />
    </button>
  </view>
  <view class="navigation-bar__center">
    <view class="navigation-bar__title">{{ title }}</view>
  </view>
  <view class="navigation-bar__right">
    <button bindtap="goHome">
      <image src="../../images/home.png" />
    </button>
  </view>
</view>

在index.wxss文件中添加：

.navigation-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #dddddd;
}

.navigation-bar__left {
  flex: 1;
}

.navigation-bar__center {
  flex: 1;
  text-align: center;
}

.navigation-bar__right {
  flex: 1;
}

.navigation-bar__title {
  font-size: 18px;
  font-weight: bold;
}

在小程序根目录的app.js文件中添加：

App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})