微信小程序+.NET(十) 小程序之自定义顶部导航栏

微信小程序之自定义顶部导航栏

这个问题是我在设计小说阅读模式页面时想到的，因为想将一些功能集成到顶部，

本来想也给web-view页面加上自定义的转码功能，后来发现web-view二话不说上来直接铺满页面，直接把navigationStyle: 'custom'选项失效掉

个人认为这一点极大限制了web-view组件的功能，使它的应用场景变得很狭窄。
回到正题，我在参考了网上一些资料后实现了这一功能：

如图，将自定义导航栏作为一个组件component
1.首先，修改navbar.json文件，注册为组件

2.编写navbar.wxml

这里的四个含有<image>的<view>就是自定义的按钮了
3.编写.js

首先上图的结构是properties:{}是配置的参数；

data:{}是本页数据；

methods:{}是按钮的监听事件

4.格式文件.wxss:

.navbar {
  width: 100vw;
  background-color: #2f2f2f;
  position: fixed;
  z-index: 10001;
}

.title-container {
  height: 44px;
  display: flex;
  align-items: center;
  position: relative;
}

.capsule {
  margin-left: 10px;
  height: 32px;
  border: 1px solid #777;
  border-radius: 16px;
  display: flex;
  align-items: center;
}

.capsule > view {
  width: 32px;
  height: 60%;
  position: relative;
}

.capsule > view:nth-child(2) {
  border-left: 1px solid #777;  
}
.capsule > view:nth-child(3) {
  border-left: 1px solid #777;  
}
.capsule > view:nth-child(4) {
  border-left: 1px solid #777;  
}

.capsule image {
  width: 60%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.title {
  color: white;
  position: absolute;
  left: 104px;
  right: 104px;
  font-size: 14px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

5.使用方法
在XXX.wxml文件头部：

<navbar后面加的四个参数就是需要显示的按钮，可以通过增减这四个参数来增减相应按钮，text里的就是标题
然后要在XXX.json文件配置，使自定义导航栏生效：

6.记得配置app.json（web-view页面此处的配置失效）

源码链接：

https://download.youkuaiyun.com/download/jinglell/11566840