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

篇首语：本文由编程笔记#小编为大家整理，主要介绍了微信小程序自定义 顶部nav 和 底部tabbar相关的知识，希望对你有一定的参考价值。

文章目录

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

一、微信小程序自定义Nav&＃xff1a;

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

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

statusBarHeight: wx.getSystemInfoSync()[&＃39;statusBarHeight&＃39;] 这句&＃xff1a;

3、在components文件里封装组件detailNav(注册组件)&＃xff1a;

代码如下&＃xff1a;
wxml&＃xff1a;

// detailNav.wxml
"nav-top" style&＃61;"padding-top:statusBarHeightpx">
"onBack" class&＃61;"nav-top-img">
"../../images/detail_img/nav_icon_back_black.png">

"nav-top-txt">咨询详情页
"nav-top-qubie">



wxss&＃xff1a;

// 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 &＃61; getApp();
Component(
/**
* 组件的属性列表
*/
properties:
,
/**
* 组件的初始数据
*/
data:
statusBarHeight: app.globalData.statusBarHeight,
,
/**
* 组件的方法列表
*/
methods:
// 返回首页
onBack:function()
wx.switchTab(
url: &＃39;../../pages/consulte/consulte&＃39;
);
// wx.reLaunch(
// url: &＃39;../../pages/consulte/consulte&＃39;,
// )
,

)


4、在哪个页面用就在哪个页面json文件引入组件(引用组件)&＃xff1a;

5、在哪个页面用就在哪个页面wxml文件使用组件(使用组件)&＃xff1a;

6、效果图&＃xff1a;