微信小程序全局定义、局部定义导航样式

最新推荐文章于 2025-02-21 23:54:40 发布

读心悦

最新推荐文章于 2025-02-21 23:54:40 发布

阅读量4.9k

点赞数

分类专栏：小程序文章标签：小程序

原文链接：http://qingzhuyue.cn/?p=93

版权

小程序专栏收录该内容

36 篇文章

订阅专栏

原文

微信小程序配置项有一个参数为：navigationStyle，设置导航栏样式，仅仅有两个值，default和custom。

default：默认样式

custom：自定义样式，只保留右上角的胶囊样式

1、全局自定义导航栏样式

在app.json中设置navigationStyle项

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

navbar代码：
navbar.wxml:

<view class='nav-wrap'>
  <!-- 导航栏背景图片 -->
  <image class="backgroundimg" src="http://img4.imgtn.bdimg.com/it/u=25651867,761734299&fm=26&gp=0.jpg" bindload="imgLoaded"/>
  <!-- // 导航栏 中间的标题 -->
  <view class='nav-title'  style='line-height: {{height*2 + 44}}px; color:#fff'>
    {{navbarData.title}}
  </view>
</view>

navbar.wxss:

/* navbar.wxss */

/* 顶部要固定定位   标题要居中   自定义按钮和标题要和右边微信原生的胶囊上下对齐 */

.nav-wrap {
  position: fixed;
  width: 100%;
  top: 0;
  background-image: linear-gradient(#2f52bc, #9198e5, #d0d9f4);
  color: #000;
  z-index: 9999999;
  overflow: hidden;
  font-size: 20px;
  height: 200rpx;
}

/* 背景图 */

.backgroundimg {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* 标题要居中 */

.nav-title {
  position: absolute;
  text-align: center;
  /* max-width: 400rpx; */
  overflow: hidden;
  white-space: nowrap;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-size: 36rpx;
  color: #2c2b2b;
}

.nav-capsule {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
  width: 140rpx;
  justify-content: space-between;
  height: 100%;
}

.back-pre {
  width: 32rpx;
  height: 36rpx;
  margin-top: 4rpx;
  padding: 10rpx;
}

.nav-capsule {
  width: 36rpx;
  height: 40rpx;
  margin-top: 3rpx;
}

navbar.js:

const app = getApp()
Component({
  properties: {
    navbarData: {
      //navbarData   由父页面传递的数据，变量名字自命名
      type: Object,
      value: {},
      observer: function (newVal, oldVal) { }
    }
  },
  data: {
    height: '',
    //默认值  默认显示左上角
    navbarData: {
      showCapsule: 1
    },
    imageWidth: wx.getSystemInfoSync().windowWidth, // 背景图片的高度
    imageHeight: '', // 背景图片的长度，通过计算获取

  },
  attached: function () {
    // 获取是否是通过分享进入的小程序
    this.setData({
      share: app.globalData.share
    })
    // 定义导航栏的高度   方便对齐
    this.setData({
      height: app.globalData.height
    })
  },
  methods: {
    // 返回上一页面
    _navback() {
      wx.navigateBack()
    },
    // 计算图片高度
    imgLoaded(e) {
      console.log(e.detail.height)
      this.setData({
        imageHeight: e.detail.height *
          (wx.getSystemInfoSync().windowWidth / e.detail.width)
      })
    },
    tapName: function () {
      console.log(0)
    }
    //返回到首页
    // _backhome() {
    //   wx.switchTab({
    //     url: '/pages/index/index'
    //   })
    // }
  },
})

navbar.json:

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

2、局自定义导航栏样式

在当前页面的JSON文件中设置navigationStyle项

{
  "usingComponents": {},
  "navigationStyle": "custom"
}

topbar.wxml:

<view class='nav-wrap'>
  <!-- 导航栏背景图片 -->
  <image class="backgroundimg" src="http://img4.imgtn.bdimg.com/it/u=25651867,761734299&fm=26&gp=0.jpg" bindload="imgLoaded" />
  <!-- // 导航栏 中间的标题 -->
  <view class='nav-title' wx:if='{{!navbarData.white}}' style='line-height: {{height*2 + 44}}px;'>
    {{navbarData.title}}
  </view>
  <view class='nav-title' wx:else='{{!navbarData.white}}' style='line-height: {{height*2 + 44}}px; color:#fff'>
    {{navbarData.title}}
  </view>
  <view style='display: flex; justify-content: space-around;flex-direction: column'>
    <view class='nav-capsule' style='height: {{height*2 + 44}}px;'>
    <!-- 左上角返回按钮 -->
      <view class="back-view">
        <image src='../../../img/fanhui.png' mode='aspectFit' class='back-pre' bindtap='_navback'></image>
        <image src='../../../img/home.png' mode='aspectFit' class='back-pre' bindtap='_backhome'></image>
      </view>
    </view>
  </view>
</view>

topbar.wxss:

/* navbar.wxss */

/* 顶部要固定定位   标题要居中   自定义按钮和标题要和右边微信原生的胶囊上下对齐 */

.nav-wrap {
  position: fixed;
  width: 100%;
  height: 200rpx;
  top: 0;
  background-image: linear-gradient(#2f52bc, #9198e5, #d0d9f4);
  color: #000;
  z-index: 9999999;
  overflow: hidden;
  border: 1px solid red;
}

/* 背景图 */

.backgroundimg {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* 标题要居中 */

.nav-title {
  position: absolute;
  text-align: center;
  max-width: 400rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-size: 36rpx;
  color: #2c2b2b;
  font-weight: 450;
}

.nav-capsule {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
  width: 140rpx;
  justify-content: space-between;
  height: 100%;
}

.back-view {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 15rpx;
}

.back-view image:nth-child(1) {
  margin-right: 22rpx;
}

.back-pre {
  width: 32rpx;
  height: 36rpx;
  /* margin-top: 4rpx; *//* padding: 10rpx; */
}

.nav-capsule {
  width: 36rpx;
  height: 40rpx;
  margin-top: 3rpx;
}

topbar.json

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

topbar.js

const app = getApp()
Component({
  properties: {
    navbarData: {
      //navbarData   由父页面传递的数据，变量名字自命名
      type: Object,
      value: {},
      observer: function(newVal, oldVal) {}
    }
  },
  data: {
    height: '',
    //默认值  默认显示左上角
    navbarData: {
      showCapsule: 1
    },
    imageWidth: wx.getSystemInfoSync().windowWidth, // 背景图片的高度
    imageHeight: '', // 背景图片的长度，通过计算获取
  },
  attached: function() {
    // 获取是否是通过分享进入的小程序
    this.setData({
      share: app.globalData.share
    })
    // 定义导航栏的高度   方便对齐
    this.setData({
      height: app.globalData.height
    })
  },
  methods: {
    // 返回上一页面
    _navback() {
      wx.navigateBack()
    },
    // 计算图片高度
    imgLoaded(e) {
      console.log(e.detail.height)
      this.setData({
        imageHeight: e.detail.height *
          (wx.getSystemInfoSync().windowWidth / e.detail.width)
      })
    },
    tapName: function() {
      console.log(0)
    },
    //返回到首页
    _backhome() {
      wx.redirectTo({
        url: '/pages/index/index'
      })
    }
  },
})

在测试页面引入导航栏组件test.json:

{
  "usingComponents": {
    "nav-bar": "../Components/topbar/topbar"
  },
  "navigationStyle": "custom"
}

test.wxml

<nav-bar  navbar-data='{{nvabarData}}'></nav-bar>
<view  class="container">测试页面</view>

test.js的data添加数据

    nvabarData: {
      showCapsule: 0, //是否显示左上角图标   1表示显示    0表示不显示
      title: '测试标题', //导航栏 中间的标题
      white: true, // 是就显示白的，不是就显示黑的。
    }