阅读 621
微信小程序 之 自定义头部导航栏

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

简介

微信小程序自定义头部导航栏也是一个常见的需求。于是,记录一下,方便查阅复习。

基础准备工作

现在以小程序的一个页面 detail 目录为例,来进行配置

  detail
        -| index.wxml
        -|
 index.js
        -| index.wxss
        -|
 index.json
复制代码

设置 ’navigationStyle’

将 index.json 中的 ‘navigationStyle’ 设置为 ‘custom’,若想要全局都自定义,则需要设置全局的 app.json

 {
    "navigationStyle""custom"
 }
复制代码

计算状态栏高度

在 app.js 中计算相应的高度,代码如下

App({
  onLaunchfunction ({
    //获取胶囊按钮的信息  {高度,距离头部高度,距离底部高度}
    const {height, top} = wx.getMenuButtonBoundingClientRect()

    // 获取手机系统信息
    wx.getSystemInfo({
      successres => {
        //手机状态栏高度
        const statusBarHeight = res.statusBarHeight;
        //导航高度
        this.globalData.navHeight = statusBarHeight + height + (top - statusBarHeight)*2;
        this.globalData.navTop = top;
        this.globalData.navButtonHeight = height;
      }, fail(err) {
        console.log(err);
      }
    })
  },
  globalDate:{ //设置全局变量
      navHeight: 0//导航栏高度
      navTop: 0//胶囊距顶部的高度
      navButtonHeight: 0//胶囊的高度
  }
}) 
复制代码

编写自定义组件

新建一个 custom-header 文件夹,代码如下

index.wxml

<view class="nav" style="height: {{navHeight}}px;">
  <view 
    class="back-btn" 
    style="top: {{navTop}}px;height: {{navButtonHeight}}px;"
    bindtap="onTap"
  >

    <image src="{{imgSrc}}"></image>
  </view>
  <view 
    class="text" 
    style="top: {{navTop}}px;height: {{navButtonHeight}}px; line-height: {{navButtonHeight}}px"
  >
{{title}}
  </view>
</view>
复制代码

index.js

let app = getApp();


Component({
  /**
   * 组件的属性列表
   */

  properties: {
    titleString,
    imgSrcString
  },

  /**
   * 组件的初始数据
   */

  data: {
    navHeight: app.globalData.navHeight,
    navTop: app.globalData.navTop,
    navButtonHeight: app.globalData.navButtonHeight
  },

  /**
   * 组件的方法列表
   */

  methods: {
    onTapfunction ({//返回上一页
      wx.navigateBack({
        delta1
      })  
    }
  }
})
复制代码

index.scss (此处我是用 scss 来写的,所以直接贴 scss 代码)

.nav{
  position: fixed;
  width: 100%;
  z-index1000000000;
  .back-btn{
    position: absolute;
    left: 40rpx;
    display: flex;
    align-items: center;
    z-index10000000001;
    image{
      width: 32rpx;
      height: 36rpx;
    }
  }
  .text{
    text-align: center;
    position: absolute;
    width: 100%;
  }
}
复制代码

index.json (json 文件未做改变)

{
  "component"true,
  "usingComponents": {}
}
复制代码

引用组件

在 index.json 文件中引入所编写的组件

{
  "usingComponents": {
    "custom-header""/components/custom-header/index" //定义组件名称,路径根据自己文件夹配置
  }
}
复制代码

页面中使用组件

只是简单的封装了一下,仅供基础使用

<custom-header 
  img-src="/image/mine/left-arrow.png"
>

</custom-header>
复制代码

参考

参考以下博客:博客

文章分类
前端
文章标签