在app.json里面添加屬性
"navigationStyle": "custom"
在小程序內新建一個文件夾 components
在components文件夾里面新建一個navbar的公用組件的文件夾并創(chuàng)建相應的4個文件
在navbar.json 里面?
{
“component”：true
}
在navbar.js里面
// pages/common/pop/pop.js
const app = getApp();
Component({
? options: {
? ? multipleSlots: true // 在組件定義時的選項中啟用多slot支持
? },
? /**
? * 組件的屬性列表
? * 用于組件自定義設置
? */
? properties: {
? ? // 彈窗標題
? ? title: { // 屬性名
? ? ? type: String, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
? ? ? value: '初始值' // 屬性初始值（可選），如果未指定則會根據類型選擇一個
? ? },
? ? //icon內容
? ? content: { type: String, value: 'icon地址' },
? ? // back
? ? backUp: {type: String, value: 'home'}
? },
? data :{? //定義navbar 需要的數據
? ? statusHeight:'',
? ? navHeight:''
? },
? ready(){? //執(zhí)行方法
? ? this.getHeight();
? },
? methods: {
? getHeight() {
? ? let sysinfo = wx.getSystemInfoSync();
? ? let statusHeight = sysinfo.statusBarHeight;
? ? let isiOS = sysinfo.system.indexOf('iOS') > -1;
? ? let navHeight = 0;
? ? if (!isiOS) {
? ? ? navHeight = 48;
? ? } else {
? ? ? navHeight = 44;
? ? }
? ? this.setData({
? ? ? statusHeight: statusHeight,
? ? ? navHeight: navHeight
? ? })
? ? app.globalData.statusHeight = statusHeight;
? ? app.globalData.navHeight = navHeight;
? }
? },
})
在navbar.wxml 和 navbar.wxss里面布局和樣式的書寫。
如何在頁面引用公用組件
例如 ：index.wxml里面引用?
?首先：在index.json 里面
{
"usingComponents": {
? ? "v-navbar": "/components/navbar/navbar"
? }
}
其次 index.wxml里面引入
頁面展示效果
