微信小程式把view居中_Taro微信小程式的自定義navbar，高度適配問題
阿新 • • 發佈：2021-01-03
技術標籤：微信小程式把view居中
小程式從不支援自定義navbar，到全域性支援navbar，再到現如今的支援單頁面navbar，所以說，技術是一直在變革和完善之中的，也給小程式更加強大的拓展能力，提升使用者的體驗。我最近在使用Taro做微信小程式，其中有需求是要求nav有個城市篩選的功能如下設計圖：
這個時候我就需要針對首頁做自定義的navbar。另外有一點，如果使用了全域性的自定義navbar的話，那麼則需要自己寫頁面路徑的返回功能。這個時候無疑增加了相當的一部分工作。
小程式除錯基礎庫2.4.3 之後就可以單頁面單獨配置了，不過從預設導航欄的頁面跳到自定義導航欄的頁面時可能會出現導航欄先消失再跳轉的問題，開發的時候還是注意下，如果使用了自定義導航欄儘量所有頁面都使用，當然web-view
下面我來分享一下自己的經歷，實際上做自定義的navbar是很簡單的，可能相對繁瑣有難度一些的是獲取系統頂部的高度(電池、WiFi等)、自定義navbar的title和膠囊狀的按鈕居中對齊、適配不同型號的機型(iPhone X)。
import Taro, { useState, useReducer, useDidShow } from '@tarojs/taro';importstylefrom'./index.module.scss';import Navbar from '../../component/navbar/index';constIndex=()=>{return( <View className={style.home}> <Navbar /> ... View> );};Index.config = { // navigationBarTitleText: '首頁',//"navigationBarBackgroundColor":"#ffffff",//"navigationBarTextStyle":"black",navigationStyle:"custom",};export default Index;
以上程式碼是首頁的程式碼，很簡單的看出，我們需要在config設定：
navigationStyle: "custom"，再引入navbar元件展示即可。
我需要在app.jsx獲取系統狀態列的高度，並且賦值給全域性變數global或者Taro都可,
這裡我也把獲取機型(iPhone X)的程式碼放在這裡，掛載在全域性變數上的原因是可能多個頁面都會用到。
class App extends Component {componentDidMount(){ Taro.getSystemInfo({ success(res) { const name = 'iPhone X'; // console.log(res) Taro.$statusBarHeight = res.statusBarHeight || 0; if(res.model.indexOf(name) > -1){ global.isiPhoneX = true;Taro.$isiPhoneX=true; } else { global.isiPhoneX = false; Taro.$isiPhoneX = false; } } })} ...}
接下來是編寫navbar的程式碼了
// src/components/Navbar/indeximport Taro from '@tarojs/taro';import { View } from '@tarojs/components';import style from './index.module.scss';import '../../assets/style/fonts/iconfont.css';functionNavbar(){ const statusBarHeight = Taro.$statusBarHeight + 'px'; const navigationBarHeight = (Taro.$statusBarHeight + 44) + 'px';constheight=Taro.$statusBarHeight*2+10; // 將狀態列的區域空餘出來 console.log(global.isiPhoneX) return ( //定位 fixednavbar的展示盒子//fixed父盒子//撐起手機系統的高度(電池、WiFi)//navbar的具體的內容，如果是iPhoneX高度除二 親測好用 global.isiPhoneX ? height/ Taro.navigateTo({url: '/pages/selectcity/index'})}> 全國 "iconfont icon-xiazhankai" /> 首頁//為了flex佈局sapce-between使得標題始終居中//全國和icon在最前 //由於navbarfixed由這個盒子來撐起來和navbar的高度 );}export default Navbar// 這裡導航欄內容可以自行配置具體我有相應的註釋！
感謝檢視！