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

最终效果:

相关推荐
qq229511650224 分钟前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦7 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac10 小时前
微信小程序的组件
微信小程序
stormjun12 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck12 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23414 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong14 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
蜕变菜鸟14 小时前
小程序跳转另一个小程序
小程序
18 小时前
躺平成长-代码开发,利用kimi开发小程序(09)
小程序
21 小时前
微信小程序运营日记(第四天)
微信小程序·小程序