微信小程序-自定义头部导航

最新推荐文章于 2024-07-30 13:02:28 发布

ZhangXD_BLOG

最新推荐文章于 2024-07-30 13:02:28 发布

阅读量1w

点赞数 6

本文链接：https://blog.csdn.net/u012054869/article/details/88304557

版权

本文介绍了如何在微信小程序中创建自定义头部导航，包括在app.json中配置，app.js获取系统信息和导航高度，app.wxss设置导航样式，以及在pages各页面中加入并应用导航的详细步骤。

摘要由CSDN通过智能技术生成

先展示效果：

步骤一：

app.json:中添加

"window": {
    "navigationStyle":"custom"
  }

步骤二：

app.js：获取手机系统信息及导航高度

App({
  onLaunch: function (options) {
    // 获取手机系统信息
    wx.getSystemInfo({
      success: res => {
        //导航高度
        this.globalData.navHeight = res.statusBarHeight + 46;
      }, fail(err) {
        console.log(err);
      }
    })
  },
  globalData: {
    navHeight: 0
  }
})

步骤三：

app.wxss：导航样式：

/* 自定义导航 */

.nav {
  width: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background: #fff;
}

.title_text {
  width: 100%;