├── README.md ├── app.js ├── app.json ├── app.wxss ├── component ├── header.js ├── header.json ├── header.wxml └── header.wxss ├── index ├── index.js ├── index.json ├── index.wxml └── index.wxss └── project.config.json /README.md: -------------------------------------------------------------------------------- 1 | # wx-com-header 2 | 3 | 小程序在 `custom` 所有的页面的顶部都会消失，然而实际项目中我们可能只需要部分页面全屏，这就要自定义一个顶部栏。 4 | 5 | 6 | 这个组件高度规范参照 iOS 及 Android 的 UI 规范即： 7 | 8 | ||iOS | Android| 9 | |---|---|---| 10 | |status bar|一般为 `20px`
iPhone X 下 为 `44px`|`24px`| 11 | |navigation bar|`44px`|`48px`| 12 | 13 | 14 | --- 15 | 16 | ### 如何使用 17 | 18 | 导入[代码片段 wechatide://minicode/uK6KXgmb6WZT](wechatide://minicode/uK6KXgmb6WZT) 19 | 20 | 将 `component` 目录下的文件导入项目中 21 | 22 | 在使用的页面引入组件 23 | ```javascript 24 | { 25 | "usingComponents": { 26 | "header": "../component/header" // 导入的文件路径 27 | } 28 | } 29 | ``` 30 | 31 | 页面中使用 32 | ``` html 33 |
Title
34 | ``` 35 | 36 | --- 37 | 38 | ## 可配置项 39 | 40 | |配置项|说明| 41 | |---|---| 42 | |fixed|导航是否固定，默认为 `false`| 43 | |background-color|导航背景色，参考 css 颜色写法，默认为 `#fff`| 44 | |color|导航文字颜色，参考 css 颜色写法，默认为 `#000`| 45 | |back|显示返回按钮，当传入为数字时，则为 `wx.navigateBack` 的 `delta` 参数| 46 | 47 | 48 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | App({ 2 | onLaunch: function () { 3 | 4 | } 5 | }) 6 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "index/index" 4 | ], 5 | "window":{ 6 | "navigationStyle": "custom" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/baranwang/wx-com-header/43fbb8153689baa85a0611fde28d515999fa8a01/app.wxss -------------------------------------------------------------------------------- /component/header.js: -------------------------------------------------------------------------------- 1 | // component/header.js 2 | Component({ 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | fixed: Boolean, 8 | color: { 9 | type: String, 10 | value: '#000' 11 | }, 12 | backgroundColor: { 13 | type: String, 14 | value: '#fff' 15 | }, 16 | back: { 17 | type: null, 18 | value: false 19 | } 20 | }, 21 | 22 | /** 23 | * 组件的初始数据 24 | */ 25 | data: { 26 | isx: /iphone10|iphone x/i.test(wx.getSystemInfoSync().model), 27 | isAndroid: /android/i.test(wx.getSystemInfoSync().system) 28 | }, 29 | 30 | /** 31 | * 组件的方法列表 32 | */ 33 | methods: { 34 | backFunction: function () { 35 | wx.navigateBack({ 36 | delta: this.data.back 37 | }) 38 | } 39 | } 40 | }) 41 | -------------------------------------------------------------------------------- /component/header.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /component/header.wxml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /component/header.wxss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "icon"; 3 | 4 | src: url("data:font/ttf;base64,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"); 5 | } 6 | 7 | .header { 8 | width: 100%; 9 | } 10 | 11 | .header-placeholder { 12 | width: 100%; 13 | height: 64px; 14 | } 15 | 16 | .header-wrap { 17 | top: 0; 18 | display: flex; 19 | flex-direction: row; 20 | align-items: center; 21 | width: 100%; 22 | height: 44px; 23 | padding-top: 20px; 24 | } 25 | 26 | .header-wrap .back { 27 | position: relative; 28 | width: 24px; 29 | height: 24px; 30 | padding: 0; 31 | margin: 0 0 0 16px; 32 | color: inherit; 33 | background-color: transparent; 34 | } 35 | 36 | .header-wrap .back::before { 37 | position: absolute; 38 | top: 0; 39 | left: 0; 40 | font-family: "icon"; 41 | font-size: 24px; 42 | line-height: 1; 43 | content: "\e73b"; 44 | border: 0; 45 | } 46 | 47 | .header-title { 48 | flex: 1; 49 | padding: 0 16px; 50 | font-size: 17px; 51 | text-align: center; 52 | } 53 | 54 | .header-right { 55 | width: 56px; 56 | } 57 | 58 | .header.isx .header-wrap { 59 | padding-top: 44px; 60 | } 61 | 62 | .header.isx .header-placeholder { 63 | height: 88px; 64 | } 65 | 66 | .header.android .header-placeholder { 67 | height: 72px; 68 | } 69 | 70 | .header.android .header-wrap { 71 | height: 48px; 72 | padding-top: 24px; 73 | } 74 | 75 | .header.android .header-wrap .back::before { 76 | content: "\e734"; 77 | } 78 | 79 | .header.android .header-title { 80 | text-align: left; 81 | } 82 | -------------------------------------------------------------------------------- /index/index.js: -------------------------------------------------------------------------------- 1 | const app = getApp() 2 | 3 | Page({ 4 | data: { 5 | 6 | }, 7 | onLoad: function () { 8 | console.log('代码片段是一种迷你、可分享的小程序或小游戏项目，可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题和 Bug 等。可点击以下链接查看代码片段的详细文档：') 9 | console.log('https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html') 10 | }, 11 | }) 12 | -------------------------------------------------------------------------------- /index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "header": "../component/header" 4 | } 5 | } -------------------------------------------------------------------------------- /index/index.wxml: -------------------------------------------------------------------------------- 1 |
Title
-------------------------------------------------------------------------------- /index/index.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/baranwang/wx-com-header/43fbb8153689baa85a0611fde28d515999fa8a01/index/index.wxss -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": true, 9 | "postcss": true, 10 | "minified": true, 11 | "newFeature": true 12 | }, 13 | "compileType": "miniprogram", 14 | "libVersion": "1.9.98", 15 | "appid": "touristappid", 16 | "projectname": "wx-com-header", 17 | "condition": { 18 | "search": { 19 | "current": -1, 20 | "list": [] 21 | }, 22 | "conversation": { 23 | "current": -1, 24 | "list": [] 25 | }, 26 | "game": { 27 | "currentL": -1, 28 | "list": [] 29 | }, 30 | "miniprogram": { 31 | "current": -1, 32 | "list": [] 33 | } 34 | } 35 | } --------------------------------------------------------------------------------