微信小程序自定义顶部导航

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

注释：自定义导航需要自备相应图片

一、设置自定义顶部导航

　　Navigation是小程序的顶部导航组件，当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏。

　　1.全局顶部导航自定义，在app.json的“window”里添加"navigationStyle": "custom"

　　2.只在某一个页面自定义顶部导航，在该页面的json文件里添加"navigationStyle": "custom"

二、获取手机屏幕数据，app.js

//app.js
const Utils = require('./utils/utils')
App({
  onLaunch: function () {
    // 获取屏幕参数
    try {
      const res = wx.getSystemInfoSync()
      if (res.platform == 'ios') {
        this.globalData.platform = 'ios'
      } else if (res.platform == 'android') {
        this.globalData.platform = 'android'
      }
      // 导航高度
      let navHeight = res.statusBarHeight 
      // 屏幕宽度/高度，单位px
      this.globalData.screenWidth = res.screenWidth
      this.globalData.screenHeight = res.screenHeight
      // 状态栏的高度，单位px
      this.globalData.statusBarHeight = res.statusBarHeight
      // 设备像素比
      this.globalData.pixelRatio = res.pixelRatio
      // 可使用窗口宽度，单位px
      this.globalData.winWidth = res.windowWidth
      // 安卓时，胶囊距离状态栏8px，iOS距离4px
      if (res.system.indexOf('Android') !== -1) {
        this.globalData.navHeight = navHeight + 14 + 32
        this.globalData.navTitleTop = navHeight + 8
        // 视窗高度 顶部有占位栏时
        this.globalData.winHeight = res.screenHeight - navHeight - 14 - 32
        // tab主页视窗高度
        this.globalData.winHeightTab = res.windowHeight - navHeight - 14 - 32
      } else {
        this.globalData.navHeight = navHeight + 12 + 32
        this.globalData.navTitleTop = navHeight + 4
        // 视窗高度 顶部有占位栏时
        this.globalData.winHeight = res.screenHeight - navHeight - 12 - 32
        // tab主页视窗高度
        this.globalData.winHeightTab = res.windowHeight - navHeight - 12 - 32
      }
      console.log(wx.getSystemInfoSync(), this.globalData.winHeightTab)
    } catch (e) {
      console.log(e)
    }
  },
  globalData: {
    platform: 'ios',
    pixelRatio: 2,
    statusBarHeight: 20,
    navHeight: 64,
    navTitleTop: 26,
    winHeight: 655,
    winWidth: 750,
    screenWidth: 375,
    screenHeight: 812
  }
})

三、封装导航组件，根目录创建components/navbar文件夹，创建Component

<!--navbar.wxml-->
<view>
  <view class="nav-bar {{isWhite=='true'?'nav-bar-white':''}}" style="height: {{navHeight}}px;background-color:{{navColor}};" catchtap="toTop">
    <text class="navbar-title" style="top:{{navTitleTop}}px;color:{{navTitleColor}};">{{navTitle}}</text>
    <view wx:if="{{noArrow=='false'&&isArrowWhite=='false'&&isNavHome=='false'}}" catchtap="navBack" class="navbar-icon-wrap" style="top:{{navTitleTop}}px;">
      <image class="navbar-icon" src="../../images/arrow_left.png"></image>
    </view>
    <view wx:if="{{isArrowWhite=='true'&&isNavHome=='false'&&noArrow=='false'}}"  catchtap="navBack" class="navbar-icon-wrap" style="top:{{navTitleTop}}px;">
      <image src="../../images/arrow_left_white.png" class="navbar-icon"></image>
    </view>
    <view wx:if="{{isNavHome=='true'&&isArrowWhite=='false'&&noArrow=='false'}}" catchtap="navHome" class="navbar-icon-wrap" style="top:{{navTitleTop}}px;">
      <image src="../../images/[email protected]" class="navbar-icon"></image>
    </view>
    <view wx:if="{{isNavHome=='true'&&isArrowWhite=='true'&&noArrow=='false'}}"  catchtap="navHome" class="navbar-icon-wrap" style="top:{{navTitleTop}}px;">
      <image src="../../images/Home@3x_white.png" class="navbar-icon"></image>
    </view>
  </view>
  <view wx:if="{{isWhite=='true'}}" class="nav-bar-place" style="height: {{navHeight}}px;background-color:{{navColor}};"></view>
</view>

// navbar.js
const app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    navHeight: {
      type: Number,
      value: 20
    },
    navTitleTop: {
      type: Number,
      value: 26
    },
    navTitle: { // 导航标题 可以为空
      type: String,
      value: ''
    },
    navTitleColor: { // 导航标题颜色 默认黑色
      type: String,
      value: '#000'
    },
    isWhite: { // 是否为白底
      type: String,
      value: 'true'
    },
    noArrow: { // 取消返回箭头
      type: String,
      value: 'false'
    },
    isArrowWhite: {//白色箭头
      type: String,
      value: 'false'
    },
    isNavHome: { // 返回首页
      type: String,
      value: 'false'
    },
    navColor: { // 导航栏背景色 默认白色
      type: String
    },
    backPath: { // 返回页面路径
      type: String,
      default: ''
    },
    backDelta: { // 返回页面层数
      type: Number,
      default: 1
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    navHeight: 0,
    navTitleTop: 0
  },
  attached() {
    // 在组件实例进入页面节点树时执行
    // 获取顶部导航高度
    this.setData({
      navHeight: app.globalData.navHeight,
      navTitleTop: app.globalData.navTitleTop
    })
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 回到首页
    navHome:function(){
      wx.switchTab({
        url: '/pages/index/index'
      })
    },
    // 回到顶部
    toTop: function () {
      wx.pageScrollTo({
        scrollTop: 0,
        duration: 300
      })
      this.triggerEvent('scrollEvent', {}) // 可绑定点击标题栏时的事件
    },
    // 返回上一页
    navBack: function () {
      if (this.properties.backPath === '') {
        wx.navigateBack({
          delta: this.properties.backDelta
        })
      } else {
        wx.redirectTo({
          url: this.properties.backPath
        })
      }
      this.triggerEvent('backEvent', {}) // 可绑定点击返回时的事件
    }
  }
})

/* navbar.wxss */
/*自定义导航栏*/
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999999;
}

.nav-bar-white {
  background-color: #fff;
}

.navbar-title {
  position: absolute;
  height: 32px;
  line-height: 32px;
  /* width: 100%; */
  width: 320rpx;
  text-align: center;

  font-size: 16px;
  color: #000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  left: 28%;
}

.navbar-icon-wrap {
  position: absolute;
  left: 9px;
  width: 44px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar-icon {
  width: 44px;
  height: 32px;
}

.navbar-scan {
  width: 28px;
  height: 28px;
}

四、引入组件（页面的json文件）

五、使用组件（根据属性可以自由配置导航，这里例举几个样式，也可以根据自己需求更改组件）

 <navbar navTitle="顶部导航demo" style="width:200rpx;"></navbar>

—————————————————————————————————

<navbar navTitle="无返回顶部导航" noArrow="true"></navbar>

—————————————————————————————————

  <navbar navTitle="透明导航" isWhite="false" isArrowWhite='true' navTitleColor="#fff"></navbar>

—————————————————————————————————

  <navbar navTitle="主页按钮导航" isNavHome='true' isArrowWhite='false' noArrow='false'></navbar>

鲜花

握手

雷人

路过

鸡蛋

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

10-27 六六分期app的软件客服如何联系？(六六分期

11-06 可心卡盟:win10系统火狐flash插件崩溃怎么

11-06 亲亲特价:怎么删除回收站图标

11-06 济南大学虚拟社区:鲁大师节能降温的具体办

11-06 xlueops.exe:无线网络安装向导

11-06 女斗合众国:win7系统cf与主机连接不稳定怎

11-06 0xc000022-[cf烟雾头]cf怎么调烟雾头

11-06 qizideyouhuo:应用程序无法正常启动0xc0000

11-06 ipz-185:win7系统vcf文件怎么打开

11-06 傻哥蹦迪:win10系统s4怎么打开usb调试

11-06 八神浩树gtaste:回收站清空了怎么恢复

11-06 妖尾之黑色守护:win10系统电脑没有1440x900

11-06 校园至尊魔王小说:win7系统浏览网页时字体

11-06 女斗合众国:win10系统访问共享文件夹提示请

11-06 tokyo hot n0654:恢复win7系统默认字体一招

11-06 雨酷仙境:设置win7系统转移临时文件夹腾出

11-06 阿穆纳伊之杖:win7系统开始菜单在右边还原

11-06 tunespotting:win10系统火狐flash插件总是

11-06 甘尔葛分析师：计谋网站seo关键词暴涨有什

11-06 蔡贵霖: 计谋网站seo关键词暴涨有什么秘密

11-06 博益网首页:ao3网页版进入不了解决方法

11-06 漏斗子专栏: 网站数据分析小白易懂精华篇

11-06 见证双虹怎么做:win7系统开启telnet命令的

11-06 颾狐蝶蜋:系统资源不足无法完成请求的服务

11-06 国光中学校歌:提交网站到alexa查询详细步骤

11-06 西安有情天:静态网页和动态网页的区别

11-06 红木雅尚斋:外部链接构造对网站的好处

11-06 前官礼遇：防止域名劫持–增强域安全性的10

11-06 密传二转答案: 中文分词算法有哪些

11-06 金泉家园邮编:百度快照劫持的表现及应对方

微信小程序一直保持登陆状态发布时间：2022-07-18

小程序wx.getSystemInfoSync获取windowHeight不准确的问题发布时间：2022-07-18

亲亲特价:怎么删除回收站图标

阅读排行榜

1 亲亲特价:怎么删除回收站图标

今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道

阅读：8317|2022-11-06

客服电话

电子邮件

微信小程序自定义顶部导航

请发表评论

全部评论

上一篇：

下一篇：

亲亲特价:怎么删除回收站图标

亲亲特价:怎么删除回收站图标

关于我们

产品与服务

解决方案

139-2527-9053