【微信小程序开发（二）】自定义导航栏

1 设置小程序通栏，不展示标题导航

每个页面都有自己的json文件配置，如下index.json文件, 他们会覆盖掉app.json已有的配置项

通栏的设置主要是 “navigationStyle”: “custom”,

{"usingComponents": {},"navigationStyle": "custom","navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black","navigationBarTitleText": "","backgroundColor": "#eeeeee","backgroundTextStyle": "light"
}

效果如下：

2 沉浸式导航

先放效果图：

这里需要注意俩个问题，

导航的适配是需要计算到各种机型的状态栏高度的，
上滑时需要给导航栏一个背景色值，否则导航标题（透明的）会和内容区域重叠

navBar.js

// components/navBar/navBar.js
Component({/*** 组件的属性列表*/properties: {title: {           type: String,  value: ''    },scrollTop: {         type: String,    value: '0',     observer: 'update', // 类似于vue的 watch 动态传值}},/*** 组件的初始数据*/data: {navigaTitle:'',ws:true,statusBarHeight: 20,navHeight: 44,opacity: 0,},ready: function() {const res = wx.getSystemInfoSync()this.data.statusBarHeight = res.statusBarHeight // 系统状态栏高度let _res = wx.getMenuButtonBoundingClientRect() // 小程序胶囊按钮let navBarPadding = (_res.top - this.data.statusBarHeight) * 2this.data.navHeight = _res.height + navBarPaddingthis.setData({navigaTitle: this.data.title,statusBarHeight: this.data.statusBarHeight,navHeight: this.data.navHeight,})},/*** 组件的方法列表*/methods: {navigateBack: function(){wx.navigateBack({delta: 1,})},update(newValue) {let op = 0;if (newValue != 0 && newValue <= 40) {op = newValue / 40}if (newValue >= 40) {op = 1;}this.setData({opacity: op})},}
})

navBar.json

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

navBar.wxml

<view class="back-nav-bar" style="position:fixed;top:{{statusBarHeight}}px;height:{{navHeight}}px;left:0;"><div class="bg-op" wx:if="{{title !== ''}}" style="height:{{statusBarHeight+navHeight}}px;opacity:{{opacity}}"></div><div class="left-icon" bindtap="navigateBack"><image src="data:images/back@2x.png" mode='widthFix'></image></div><div class="title">{{title}}</div><div class="icon"></div></view>

navBar.wxss

/* component/navBar/navBar.wxss */
.back-nav-bar {height: 64rpx;width: 100vw;display: flex;flex-direction: row;justify-content: space-between;align-items: center;z-index: 999;position: relative;
}
.bg-op {position: absolute;width: 100%;bottom: 0;left: 0;background: linear-gradient(180deg, #C1CFE5 0%, #DEE4EE 100%);z-index: -1;
}.left-icon {width: 48rpx;height: 48rpx;margin-left: 40rpx;
}
.icon {width: 48rpx;height: 48rpx;margin-right: 40rpx;
}
.left-icon image {display: block;width: 100%;
}

在需要使用的页面中引入组件 usingComponents

{"usingComponents": {"nav-bar": "/components/navBar/navBar"},"navigationStyle": "custom","navigationBarTextStyle": "black","navigationBarTitleText": "冥想","backgroundColor": "#eeeeee","backgroundTextStyle": "dark"
}

在需要使用的wxml文件中引入

<nav-bar title="冥想" scrollTop="{{scrollTop}}"></nav-bar>

在页面的js中给scrollTop赋值

  data: {scrollTop: 0},onPageScroll(t) {this.setData({scrollTop: t.scrollTop})},

至此大工告成~

【微信小程序开发（二）】自定义导航栏相关推荐

微信小程序开发错误——底部导航栏没有显示完全
微信小程序开发错误--底部导航栏没有显示完全原因:由于在app.json中设置跳转页面时,假设有A.B.C.D四个图标(点击可以跳转),B和C的跳转页面相同,C的图标就会覆盖B的图标,B的图标就相当 ...
Taro编译微信小程序实现顶部自定义导航栏
[需求] 使用taro开发微信小程序的过程中,涉及到小程序的需要自定义顶部导航栏(导航栏渐变色),微信小程序中只能够设置固定的颜色,渐变颜色以及添加其他按钮的操作就不能够通过小程序自带的api来实现 ...
vue微信小程序开发(二)---页面以及导航
vue微信小程序开发(二)-菜单以及页面这里写目录标题 vue微信小程序开发(二)---菜单以及页面图标的选择创建并注册页面底部导航大家好,我是代码哈士奇,是一名软件学院网络工程的学生, ...
微信小程序——不同角色的导航栏显示不同
文章目录问题描述解决方法代码实现底部导航栏排查员存在的问题问题描述微信小程序的原生底部导航栏限制了数量(3-5个)且不能根据你的不用用户进行动态的底部导航栏变化,无法适应多种用户从 ...
《微信小程序开发》页面导航最强详解 | 如何对小程序页面进行跳转？
<微信小程序开发> 页面导航最强详解 | 如何对小程序页面进行跳转? 文章目录 <微信小程序开发> 页面导航最强详解 | 如何对小程序页面进行跳转? 一.微信小程序导航二.命 ...
微信小程序实现左侧滑动导航栏
微信小程序实现左侧滑动导航栏 1.左侧滑动导航栏图如下 2.这是我们左侧滚动栏的代码 wxml <view class='under_line'></view><view ...
微信小程序开发(二)图片上传
更新2017-08-24 更新七牛SDK只最新7.0.5版本. 在之前的博客<Node.js+express+MySQL使用七牛云实现的用户头像修改>,已经实现了在MUI框架或者< ...
微信小程序购物车和左侧导航栏
先上实现图话不多说,直接上代码 cars.js // const arr = require("../../utils/data"); // pages/cars/cars.j ...
微信小程序实现透明渐变导航栏
最近在微信小程序实现透明渐变的导航栏,刚好有接触wxs,所以尝试着用wxs实现.核心代码: <scroll-view scroll-y style="height: {{pageHei ...
入门微信小程序开发(二)wxml与wxss
一.初识WXML 对于每一位前端开发者而言,熟练的编写静态页面是入门的开始,在小程序中这一点也无法避免.在介绍微信小程序功能交互之前,我们先了解在小程序中如何实现页面布局与页面样式,这里先来介绍WXM ...

【微信小程序开发（二）】自定义导航栏

1 设置小程序通栏，不展示标题导航

2 沉浸式导航

【微信小程序开发（二）】自定义导航栏相关推荐

最新文章

热门文章