微信小程序自定义navigationBar顶部导航栏(背景图片)适配所有机型,使用tdesign-miniprogram t-navbar设置背景图片

设置导航栏样式自定义

一定要设置,不然页面会出现一个原生的导航栏,一个自定义的

javascript 复制代码
// app.json文件
"window": {
    "navigationStyle": "custom"
}

设置导航栏样式

我这里使用tdesign-miniprogram t-navbar,t-navbar好像做了高度自适应,也可以看下一部分自己定义导航栏自适应的高度。下面是我集成的commonNav组件代码

wxml

html 复制代码
<!--components/commonNav/commonNav.wxml-->
<t-navbar delta="{{delta}}" id="navbar" left-arrow="{{false}}" style="background-image: url({{baseUrl}}/index/topbg.png);" t-class="control" class="custom-navbar" title="{{title}}">
  <view slot="left" class="custom-capsule">
    <t-icon wx:if="{{back}}" bind:tap="goback" aria-role="button" aria-label="返回" name="chevron-left" class="custom-capsule__icon" />
    <t-icon wx:if="{{!back}}" bind:tap="onGoHome" aria-role="button" aria-label="首页" name="home" class="custom-capsule__icon" />
  </view>
</t-navbar>

或者如下,style visibility:visible

html 复制代码
  <t-navbar t-class="control" id="navbar" t-class-left="left-box" style="visibility:visible;background-size:100% auto;background-position:top;background-image:url('{{baseUrl}}/shop/topbg.png')">
    <view class="new-product-info" slot="left">
      <view class="searchbox" bind:tap="goSearch">
        <view class="search flex jcc aic">
          <image src="{{baseUrl}}/search-icon.png" mode="widthFix" class="search-icon" />
          <text>搜索</text>
        </view>
      </view>
    </view>
  </t-navbar>

必须要 --td-navbar-bg-color: transparent;

wxss

javascript 复制代码
.control {
  background-size: cover;
  --td-navbar-bg-color: transparent;
}
.custom-navbar {
  --td-navbar-color: #fff;
  --td-navbar-title-font-weight: 400;
  font-family: "pf_bold";
}

.custom-image {
  width: 100vw;
  height: 87px;
}
.custom-capsule {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-capsule__icon {
  flex: 1;
  position: relative;
  font-size: 48rpx;
}

js

javascript 复制代码
// components/commonNav/commonNav.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      value: '',

    },
    delta: {
      type: Number,
      value: 1,

    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    baseUrl: getApp().globalData.baseUrl,
    back: true
  },

  /**
   * 组件的方法列表
   */
  lifetimes: {
    ready() {
      // console.log()

      if (getCurrentPages().length == 1) {
        getApp().globalData.hideIndexLoading = true;
        this.setData({
          back: false
        })
      }
    }
  },
  methods: {
    goback() {
      this.selectComponent('#navbar').goBack();
      this.triggerEvent('goback')
    },
    onGoHome() {

      wx.switchTab({
        url: '/pages/index/index',
      })
    }
  }
})

json

javascript 复制代码
{
  "component": true,
  "usingComponents": {
    "t-icon": "tdesign-miniprogram/icon/icon",
    "t-navbar": "tdesign-miniprogram/navbar/navbar"
  }
}

自定义导航栏高度

计算导航栏高度

此处选择在app.js文件(小程序启动时)计算并存储在全局变量中

javascript 复制代码
    const that = this;
    // 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // 导航栏高度 = 状态栏高度 + 44
    that.globalData.navBarHeight = systemInfo.statusBarHeight + 44;

页面引入全局变量的导航栏高度

javascript 复制代码
  data: {
    navBarHeight: getApp().globalData.navBarHeight,
  }

布局

javascript 复制代码
<view class="navCustom" style="height:{{navBarHeight}}px;">
  <view style="position: absolute; bottom: 10rpx; padding-left: 20rpx; width: 100%; display: flex; ">
    <image src="/images/logo.png" mode="" style="width: 60rpx; height: 60rpx;"/>
    <view style="height: 60rpx; display: flex; align-items: center; margin-left: 15rpx;">
      <text>公司名称</text>
    </view>
  </view>
</view>
<view style="margin-top:{{navBarHeight}}px;"></view>

对于要显示的内容(此项目中的logo、文字等),采取绝对布局,且是相对于底部的,这样才能在预览中得到想要的效果

最终效果:

相关推荐
thinkQuadratic1 小时前
微信小程序动态设置高度,添加动画等常用操作
微信小程序·小程序
中科三方2 小时前
APP和小程序需要注册域名吗?(国科云)
小程序·apache
幽络源小助理4 小时前
微信小程序文章管理系统开发实现
java·微信小程序·springboot
10年前端老司机5 小时前
微信小程序模板语法和事件
前端·javascript·微信小程序
上趣工作室6 小时前
微信小程序开发1------微信小程序中的消息提示框总结
微信小程序·小程序
三天不学习8 小时前
微信小程序蓝牙连接打印机打印单据完整Demo【蓝牙小票打印】
微信小程序·小程序·蓝牙打印
韩仔搭建9 小时前
美乐迪电玩大厅加载机制与 RoomList 配置结构分析
游戏·小程序·开源·lua
WKK_11 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
老李不敲代码1 天前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
fakaifa1 天前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序