小程式自定義導航條

小程式自定義導航條

主要思路將自帶的關閉，自己編寫一個，因為用自帶的可控性查，就自己寫一個吧，查了百度，寫下來這算是一個比較完整的答案了

 

1.首先在app.json中將navigationStyle設置為「custom」，並且定義一個組件navbar

{
  “pages”:[
    
  ],
  “usingComponents”: {
    “navbar”: “/pages/navbar/navbar”
  },
  “window”:{
    “backgroundTextStyle”:”light”,
    “navigationBarBackgroundColor”: “#77d5fb”,
    “navigationBarTextStyle”:”white”,
    “navigationStyle”:”custom”
  },
  “style”: “v2”,
  “sitemapLocation”: “sitemap.json”
}
 

2.接著在app.js中獲取導航的高度



  onLaunch: function () {


　　wx.getSystemInfo({
      success: res => {
        //導航高度
        this.globalData.navHeight = res.statusBarHeight;
      }, fail(err) {
        console.log(err);
      }
　　})
}




3.接著再創建一個共用的navbar導航條




 


 


 navbar.wxml 圖片路徑換下就可以




<view class="navbar" style="{{'height: ' + navigationBarHeight}}">
  <view style="{{'height: ' + statusBarHeight}}"></view>
  <view class='title-container'>
    <view class='capsule' wx:if="{{ back || home }}">
      <view bindtap='back' wx:if="{{back}}">
        <image src='../../images/back.png'></image>         
      </view>
      <view bindtap='backHome' wx:if="{{home}}" block="{{true}}">
        <image src='../../images/home.png'></image>
      </view>
    </view>
    <view class='title'>{{text}}</view>
  </view>
</view> 
<view style="{{'height: ' + navigationBarHeight}};background: white;"></view>




 navbar.wxss




.navbar {
  width: 100%;
  background-color: #1797eb;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.title-container {
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
}
.capsule {
  margin-left: 10px;
  height: 30px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #fff;
  border-radius: 16px;
  display: flex;
  align-items: center;
}
.capsule > view {
  width: 45px;
  height: 60%;
  position: relative;
}
.capsule > view:nth-child(2) {
  border-left: 1px solid #fff;  
}
.capsule image {
  width: 50%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.title {
  color: white;
  position: absolute;
  top: 6px;
  left: 104px;
  right: 104px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}




navbar.js     


 navigationBarHeight：是導航條的總高度


statusBarHeight：是只有最上面一條的高度


text：前台傳值格式text=”標題”


back：返回上級，前台傳值格式back=”{{false}}”


home：返回首頁，前台傳值格式home=”{{false}}”




const app = getApp()

Component({
  properties: {
    text:String,
    back: {
      type: Boolean,
      value: true
    },
    home: {
      type: Boolean,
      value: true
    }
  },
  data: {
    statusBarHeight: app.globalData.navHeight + 'px',
    navigationBarHeight: (app.globalData.navHeight + 44) + 'px'
  },

  methods: {
    backHome: function () {
      wx.navigateTo({
        url: '/pages/index/index'
      })
    },
    back: function () {
        wx.navigateBack({
          delta: 1
        })      
    }
  }
})




navbar.json




{
  "usingComponents": {}
}




4.引用導航條,放在頁面頂部就行




<navbar text="大客車" back="{{false}}"></navbar>


　<view class=’page-content’>


　</view>




參考鏈接：//www.cnblogs.com/fundebug/p/customize-wechat-miniprogram-navigation.html

		  				

		  				

													


						
							

							
																
Tags:  

																

								

							

						
						
						


						 

							
					

					    
									

													

													
											


			


			


	

		
VirMach 便宜 VPS
 


QNews
 
QNews