微信小程序-自定义导航栏及返回上一级页面的实现

一、参考文章

1、微信小程序自定义navigationBar
2、微信小程序返回上一级页面的实现代码
3、小程序开发——常用布局

二、需求

在导航栏中需要显示信息的“未读数量”,所以需要自定义导航栏

三、 最终效果

在这里插入图片描述

四、实现

1、App.js:计算各种所需高度(参考文章1),放入缓存,供页面使用

  onLaunch: function(options) {
      //获取自定义导航栏高度-用于信息页面--tcy
      this.getNavigationBarHeight();
  },

  //获取自定义导航栏高度-用于信息页面--tcy
  getNavigationBarHeight(){
    const { statusBarHeight, platform } = wx.getSystemInfoSync()
    const { top, height } = wx.getMenuButtonBoundingClientRect()

    // 状态栏高度
    wx.setStorageSync('statusBarHeight', statusBarHeight)
    // 胶囊按钮高度 一般是32 如果获取不到就使用32
    wx.setStorageSync('menuButtonHeight', height ? height : 32)
    
    // 判断胶囊按钮信息是否成功获取
    if (top && top !== 0 && height && height !== 0) {
        const navigationBarHeight = (top - statusBarHeight) * 2 + height
        // 导航栏高度
        wx.setStorageSync('navigationBarHeight', navigationBarHeight)
    } else {
        wx.setStorageSync(
          'navigationBarHeight',
          platform === 'android' ? 48 : 40
        )
    }
  },

2、message.json:需自定义导航栏页面的json文件

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  //自定义导航栏所需的设置
  "navigationStyle": "custom"
}

3、message.wxml

<!-- 自定义导航栏 -->
<view style="height: {{navigationBarAndStatusBarHeight}}px;background-color:#fff;width: 100%;display: flex;flex-direction: row;">
    <view style="padding-top:{{statusBarHeight+10}}px;width: 100%;">
        <image src="/pages/images/back.png" style="height: 20px; width: 20px;padding-left:3vw;float: left;" bindtap="back"></image>
        <view style="float: left;margin-left: 140px;font-size: 13px;"> 
            <text>消息{{wdsl > 0 ? '('+wdsl+')' : ''}}</text>
        </view>
    </view>
</view>

4、message.wxss

5、message.js

Page({

    /**
     * 页面的初始数据
     */
    data: {
        //获取各种高度信息---tcy
        // 状态栏高度
        statusBarHeight: wx.getStorageSync('statusBarHeight'),
        // 导航栏高度
        navigationBarHeight: wx.getStorageSync('navigationBarHeight'),
        // 胶囊按钮高度
        menuButtonHeight: wx.getStorageSync('menuButtonHeight'),
        // 导航栏和状态栏高度
        navigationBarAndStatusBarHeight:
            wx.getStorageSync('statusBarHeight') +
            wx.getStorageSync('navigationBarHeight'),
    },

    //返回按钮实现
    back(){
        //返回上一级,关闭当前页面
        wx.navigateBack({
        	delta: 1
        })
    },

   
})
  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序中可以通过自定义导航栏实现更加个性化的界面设计。以下是一个简单的实现步骤: 1. 在 app.json 文件中设置 "navigationStyle": "custom",表示使用自定义导航栏。 2. 在页面的 WXML 文件中编写自定义导航栏的 HTML 代码,例如: ``` <view class="navbar"> <view class="navbar-title">自定义导航栏</view> </view> ``` 其中,navbar 表示导航栏的样式,navbar-title 表示标题的样式,可以根据需要进行自定义。 3. 在页面的 wxss 文件中设置导航栏的样式,例如: ``` .navbar { height: 44px; background-color: #fff; border-bottom: 1px solid #ccc; display: flex; align-items: center; justify-content: center; } .navbar-title { font-size: 18px; font-weight: bold; color: #000; } ``` 其中,height 表示导航栏的高度,background-color 表示导航栏的背景颜色,border-bottom 表示导航栏底部的边框线,display、align-items 和 justify-content 表示导航栏标题的布局方式,navbar-title 表示标题的样式,可以根据需要进行自定义。 4. 在页面的 JS 文件中设置导航栏返回按钮,例如: ``` wx.showModal({ title: '提示', content: '确认返回一页?', success: function (res) { if (res.confirm) { wx.navigateBack({ delta: 1 }) } } }) ``` 其中,wx.showModal 表示显示一个模态框,title 表示模态框的标题,content 表示模态框的内容,success 表示点击确定按钮后执行的回调函数,wx.navigateBack 表示返回一页。 通过以上步骤,就可以实现微信小程序自定义导航栏

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值