微信小程序自定义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、文字等),采取绝对布局,且是相对于底部的,这样才能在预览中得到想要的效果

最终效果:

相关推荐
wqq_9922502772 小时前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
说私域19 小时前
基于“开源 2+1 链动模式 S2B2C 商城小程序”的社区团购运作主体特征分析
大数据·人工智能·小程序
HUODUNYUN19 小时前
小程序免备案:快速部署与优化的全攻略
服务器·网络·web安全·小程序·1024程序员节
guanpinkeji19 小时前
二手手机回收小程序,一键便捷高效回收
微信小程序·小程序·软件开发·手机回收小程序·二手手机回收
paterWang19 小时前
小程序-基于java+SpringBoot+Vue的小区服务管理系统设计与实现
java·spring boot·小程序
尘浮生20 小时前
Java项目实战II基于微信小程序的私家车位共享系统(开发文档+数据库+源码)
java·开发语言·数据库·学习·微信小程序·小程序·maven
十幺卜入20 小时前
基于xr-frame实现微信小程序的手部、手势识别3D模型叠加和石头剪刀布游戏功能
游戏·微信小程序·xr·手势识别·人手跟踪
tundra381 天前
DTH11传感器温度湿度+esp8266+阿里云+小程序
阿里云·小程序·云计算
虞书欣的61 天前
Python小游戏28——水果忍者
开发语言·人工智能·游戏·小程序·pycharm
坠入暮云间x1 天前
Nodejs开发仿马蜂窝旅游小程序API接口,服务器端开发,商家后台 Vue3+微信小程序+koa+mongodb+node.js
微信小程序·小程序·旅游