在app.json里面添加属性
"navigationStyle": "custom"
在小程序内新建一个文件夹 components
在components文件夹里面新建一个navbar的公用组件的文件夹并创建相应的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(){ //执行方法
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里面引入
页面展示效果
