微信小程序自定义导航栏效果

本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下

第一步 添加属性 “navigationStyle”: “custom”

全局: app.json中添加属性 “navigationStyle”: “custom”

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
  },

局部: 单个文件index.json中添加属性 “navigationStyle”: “custom”

{
  "navigationBarTitleText": "我的",
  "navigationBarTextStyle": "white",
  "navigationStyle": "custom",
  "usingComponents": {}
}

第二步 自定义导航栏

获取设备顶部窗口的高度(不同设备窗口高度不一样,根据这个来设置自定义导航栏的高度)
app.js

// app.js
App({
  onLaunch() {
    //自定义导航栏 获取设备顶部窗口的高度(不同设备窗口高度不一样,根据这个来设置自定义导航栏的高度)
    wx.getSystemInfo({
      success: (res) => {
        let custom = wx.getMenuButtonBoundingClientRect()
        this.globalData.statusBarHeight = res.statusBarHeight
        this.globalData.navBarHeight = custom.height + (custom.top - res.statusBarHeight) * 2
      }
    })
  },
  globalData: {
    statusBarHeight: 0,
    navBarHeight: 0,
  }
})

第三步 自定义组件

navbar.js

const app = getApp()
Component({
  // multipleSlots 为组件开启多插槽模式
  options: {
    multipleSlots: true,
  },
  // externalClasses 为组件指定多个外部样式类
  externalClasses: ['nav-bgc-class', 'nav-title-class', 'ex-back-pre'],
  // properties 组件用来储存外部数据
  properties: {
    navbarData: { //navbarData   由父页面传递的数据,变量名字自命名
      type: Object,
      value: {},
      observer: function (newVal, oldVal) { }
    },
  },
  // 组件用来储存内部私有数据
  data: {
    // 自定义导航栏的高度
    statusBarHeight: app.globalData.statusBarHeight,
    navBarHeight: app.globalData.navBarHeight,
  },
  // attached函数 当组件进入页面节点树时触发,可以使用setData,绝大多数初始化工作在这个时机进行
  attached: function () { },
  // methods对象 定义组件内的各种方法
  methods: {
    // 返回键,触发自定义事件,将返回的事件交给父级页面来分情况定义
    _navback() {
      // this.triggerEvent('goBack')
      wx.navigateBack()
    }
  }
})

navbar.json

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

navbar.wxml

<!-- 默认为黑色的返回键-->
<view class="nav-wrap nav-bgc-class" style='height: {{statusBarHeight + navBarHeight}}px;'>
  <!--  左上角的返回按钮 其中wx:if='{{navbarData.showCapsule}}' 是控制左上角按钮的显示隐藏,1为显示,0为隐藏 -->
  <view class='nav-capsule' style='margin-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;' wx:if='{{navbarData.showCapsule}}' bindtap='_navback'>
    <image class='back-pre ex-back-pre' src='back.png' mode='aspectFill'></image>
  </view>
    <!--  中间的标题 -->
  <view class='nav-title nav-title-class' style='margin-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;line-height: {{navBarHeight}}px;'>{{navbarData.title}}</view>
</view>

navbar.wxss

/* 顶部固定定位   标题要居中   自定义按钮和标题要和右边微信原生的胶囊上下对齐 */
.nav-wrap {
  position: fixed;
  width: 750rpx;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 9999999;
  transform: translate3d(0, 0, 0);
}
/* 返回键 */
.nav-capsule {
  width: 140rpx;
  /* background-color: skyblue; */
  /* 让里面的图片元素垂直居中 */
  display: flex;
  align-items: center;
  margin-left: 30rpx;
}

.back-pre {
  width: 32rpx;
  height: 36rpx;
}

/* 标题 */
.nav-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 300rpx;
  margin: auto;
  /* 水平垂直居中 */
  /* display: flex; */
  align-items: center;
  justify-content: space-around;
  /* 超出部分省略号显示 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 字体设置 */
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
}

第四步 使用组件

新建一个文件夹mine

mine.js

const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    nvabarData: {
      showCapsule: 0, //是否显示左上角图标   1表示显示    0表示不显示
      title: '我的', //导航栏 中间的标题
    },
    height: app.globalData.statusBarHeight + app.globalData.navBarHeight,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var userInfo = wx.getStorageSync('userInfo')
    if (userInfo) {
      this.setData({
        userInfo: userInfo,
        hasUserInfo: true
      })
    }
    var phoneNumber = wx.getStorageSync('phoneNumber')
    if (phoneNumber) {
      this.setData({
        phoneNumber: phoneNumber,
      })
    }
    var loginInfo = wx.getStorageSync('loginInfo')
    if (loginInfo) {
      this.setData({
        loginInfo: loginInfo
      })
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

mine.json

{
  "navigationStyle": "custom",
  "usingComponents": {
      "nav-bar": "/components/navbar/navbar",
  }
}

mine.wxml

<!-- navbar头部 -->
<nav-bar navbar-data='{{nvabarData}}'></nav-bar>
<view style='margin-top: {{height}}px;'>
  内容
</view>

第五步 看效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题

    这两天因为要做一个带背景的小程序头,哭了,小程序导航栏有背景也就算了,还得让导航栏上的背景顺下来,心态小崩.现在可以单独设置一个页面的小程序头了,但是前提是要微信7.0以上的版本,考虑到兼容性问题,还是不要贸然的上了,所以用老版本的替换所有页面的小程序头来做. ​ 参考了其他篇的文章,但是没有解决自定义背景的和返回按钮的颜色的问题,还有因为IOS的橡皮筋效果,对IOS端不太友好,屏幕会乱划.所以针对性的改动了这些功能,因为才学小程序两三天,所以其中踩了很多坑,但好在最后效果还是达到了. 下面是效

  • 微信小程序顶部导航栏滑动tab效果

    小程序商品展示需要导航栏的商品分类进行滑动,供大家参考,具体内容如下 效果图: 首先是滑动的效果: <scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;"> </scroll-view> 小程序使用</scroll-view>,横向移动即可 WXML:这里面我将导航栏显示类目定义为5个,每个20%,当超出5个分类,也就是index>4的时候,导

  • 详解微信小程序设置底部导航栏目方法

    详解微信小程序设置底部导航栏目方法 小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家. 好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了三个导航图标,因为我们有三个页面,小程序最多能加5个. 那他们是怎么出现怎么着色的呢?两步就搞定! 1. 图标准备 阿里图标库  http://www.iconfont.cn/collections/show/29 我们进入该网站,鼠标滑到一个喜欢的图标上面  点击下

  • 微信小程序实战之顶部导航栏(选项卡)(1)

    本文实例为大家分享了微信小程序顶部导航栏的具体代码,供大家参考,具体内容如下 需求:顶部导航栏 效果图: wxml: <!--导航条--> <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key=&qu

  • 详解微信小程序胶囊按钮返回|首页自定义导航栏功能

    项目代码:https://github.com/Shay0921/header-navbar.git 在小程序中,从转发出来的小程序消息卡片进入,因为页面栈中只有一个,所以不会出现返回按钮,对于一些电商平台来说,当商品被转发后会很影响客户查看其它产品和首页,这时候就需要使用自定义导航栏自己写一个"胶囊按钮".如下图所示: 从别的页面点到商品页时会有返回和首页按钮: 当从分享页进入到商品页时,因为页面栈只有一个,所以只有首页按钮: 首先我们需要如何开启自定义导航栏,查看手册后会发现一个页

  • 微信小程序教程系列之设置标题栏和导航栏(7)

    微信小程序标题栏和导航栏的设置方法,具体内容如下 设置标题栏 标题栏window 在app.json文件里面,通过window对象里面的属性进行设置 示例: app.json: 运行: 设置导航栏 导航栏TabBar 如果我们的小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面. Tip: 通过页面跳转(wx.navigateTo)或者页面重定向(wx.redirect

  • 微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)

    前言 navigationBar相信大家都不陌生把?今天我们就来说说自定义navigationBar,把它改变成我们想要的样子(搜索框+胶囊.搜索框+返回按钮+胶囊等). 思路 隐藏原生样式 获取胶囊按钮.状态栏相关数据以供后续计算 根据不同机型计算出该机型的导航栏高度,进行适配 编写新的导航栏 引用到页面 正文 一.隐藏原生的navigationBar window全局配置里有个参数:navigationStyle(导航栏样式),default=默认样式,custom=自定义样式. "wind

  • 微信小程序中顶部导航栏的实现代码

    微信小程序中顶部导航栏的实现 实例代码: <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11</view> <view class="swiper-tab-list {{curre

  • 微信小程序 开发之顶部导航栏实例代码

    微信小程序 开发之顶部导航栏 需求:顶部导航栏 效果图: wxml: <!--导航条--> <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap=

  • 微信小程序实现左侧滑动导航栏

    本文实例为大家分享了微信小程序实现左侧滑动导航栏的具体代码,供大家参考,具体内容如下 左侧滑动导航栏如图 wxml <!-- 左侧滚动栏 --> <view class='under_line'></view> <view style='float: left' class='left'> <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}&quo

随机推荐