微信小程序自定义顶部nav 和底部tabbar

文章目录

一、微信小程序自定义Nav：
- 1、首先在小程序app.json中添加 `"navigationStyle": "custom"`来标志自定义导航栏：
- 2、调节 view 代替原顶部导航栏到app.js里添加
- 3、在components文件里封装组件detailNav(注册组件)：
- 4、在哪个页面用就在哪个页面json文件引入组件(引用组件)：
- 5、在哪个页面用就在哪个页面wxml文件使用组件(使用组件)：
- 6、效果图：

一、微信小程序自定义Nav：

1、首先在小程序app.json中添加 `"navigationStyle": "custom"`来标志自定义导航栏：

2、调节 view 代替原顶部导航栏到app.js里添加

statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'] 这句：

3、在components文件里封装组件detailNav(注册组件)：

代码如下：
wxml：

// detailNav.wxml
<view class="nav-top" style="padding-top:{{statusBarHeight}}px"><view bindtap="onBack" class="nav-top-img"><image src="../../images/detail_img/nav_icon_back_black.png"></image></view><view class="nav-top-txt">咨询详情页</view><view class="nav-top-qubie"></view>
</view>

wxss：

// detailNav.wxss
.nav-top{position: fixed;width: 100%;top: 0;left: 0;height: 160rpx;background-color: #FFFFFF;z-index: 99999;display: flex;flex-direction: row;padding: 15rpx;justify-content: space-between;}.nav-top-img{height: 37rpx;width: 37rpx;z-index: 10000;margin-top: 28rpx;margin-left: 25rpx;image {width: 100%;height: 100%;}}.nav-top-txt {font-weight: bold;line-height: 85rpx;flex: 1;text-align: center;font-size: 40rpx;font-family: "黑体";padding-right: 27rpx;}.nav-top-qubie{height: 43rpx;width: 43rpx;z-index: 10000;}

js:

 // detailNav.js
var app = getApp();
Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {statusBarHeight: app.globalData.statusBarHeight,},/*** 组件的方法列表*/methods: {// 返回首页onBack:function(){wx.switchTab({url: '../../pages/consulte/consulte'});// wx.reLaunch({//   url: '../../pages/consulte/consulte',// })},}
})

4、在哪个页面用就在哪个页面json文件引入组件(引用组件)：

5、在哪个页面用就在哪个页面wxml文件使用组件(使用组件)：

6、效果图：

微信小程序自定义顶部nav 和底部tabbar相关推荐

微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
微信小程序自定义顶部栏、等十个重要的常见功能总结
一.使用本机字体二.自定义透明顶部栏三.拨打电话四.获取用户信息五.动态设置图片地址六.一键内容到剪切板,并关闭弹框提示七.多选及重置功能:动态改变class 八.px及rpx 九.如何使 ...
微信小程序自定义顶部背景
1.将json文件文件里的navigationStyle属性值设置为custom即可自定义顶部背景 2.微信小程序中不能用本地图片作为背景图片解决办法: 1.css中通过url获取网络图片 2.Ba ...
微信小程序自定义顶部以及底部tabbar
1.首先建立一个模板,在里边模板的wxml里绘制公共的顶部以及底部代码如下:  <template name= ...
总结-微信小程序自定义顶部导航(超详细)附加效果图
一.在需要设置头部导航栏的页面中通过json配置 "navigationStyle": "custom" ,自定义导航栏,只保留胶囊按钮,效果如下: 二.做完上 ...
微信小程序——自定义顶部菜单navigationBar方式（可详细了！）
前言: 开发中,设计师也是奇思妙想,把小程序顶部的默认菜单改成了自己觉得好看的样式,改了返回icon的样式,加了各种返回首页.收藏.什么鬼的按钮,甚至把胶囊按钮都给改了~~~,好吧,遵从设计师的审美, ...
uniapp开发微信小程序自定义顶部导航栏
自定义导航栏渐变色,先上效果使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色全局定义导航栏 "windo ...
微信小程序自定义顶部导航栏navigationBar
自定义navigationBar怎么做? 去掉原生导航栏. 将需要自定义navigationBar页面的page.json的navigationBarTitleText去掉. 加上"navi ...

微信小程序自定义顶部nav 和底部tabbar

文章目录

一、微信小程序自定义Nav：

1、首先在小程序app.json中添加 `"navigationStyle": "custom"`来标志自定义导航栏：

2、调节 view 代替原顶部导航栏到app.js里添加

3、在components文件里封装组件detailNav(注册组件)：

4、在哪个页面用就在哪个页面json文件引入组件(引用组件)：

5、在哪个页面用就在哪个页面wxml文件使用组件(使用组件)：

6、效果图：

微信小程序自定义顶部nav 和底部tabbar相关推荐

最新文章

热门文章

微信小程序自定义 顶部nav 和 底部tabbar

文章目录

一、微信小程序自定义Nav：

1、首先在小程序app.json中添加 "navigationStyle": "custom"来标志自定义导航栏：

2、调节 view 代替原顶部导航栏到app.js里添加

3、在components文件里封装组件detailNav(注册组件)：

4、在哪个页面用就在哪个页面json文件引入组件(引用组件)：

5、在哪个页面用就在哪个页面wxml文件使用组件(使用组件)：

6、效果图：

微信小程序自定义 顶部nav 和 底部tabbar相关推荐

最新文章

热门文章

微信小程序自定义顶部nav 和底部tabbar

1、首先在小程序app.json中添加 `"navigationStyle": "custom"`来标志自定义导航栏：

微信小程序自定义顶部nav 和底部tabbar相关推荐