一、前提说明:
首先uniapp代码在微信小程序和App、H5之间有时候是不兼容的,例如正常通过app-plus设置顶部导航,H5端是合适的
目的效果展示的结果:如图所示,我们需要实现这样的效果
![](https://img-blog.csdnimg.cn/img_convert/b18b2d7606c76b9381b751aae11fbb21.png)
1.H5端展示:
![](https://img-blog.csdnimg.cn/img_convert/b18b2d7606c76b9381b751aae11fbb21.png)
2.微信小程序端展示:
顶部没有出现搜索的图标和消息的图标
![](https://img-blog.csdnimg.cn/img_convert/54fa3cdbdc5e9812b7bcbe9e891f1a9f.png)
二、H5端实现说明:
1.查看官方文档(app-plus):
https://uniapp.dcloud.net.cn/collocation/pages.html#app-titlenview-searchinput
![](https://img-blog.csdnimg.cn/img_convert/a631ae5d1146e875db415738c10326ec.png)
如图我们也可以看到只兼容App+H5,并不兼容小程序
app-plus下有一个titleNview属性供我们实现导航栏
2.titleNView具体属性:
![](https://img-blog.csdnimg.cn/img_convert/aa22079bbdcb60123e6f0e6c70757067.png)
我们这里需要用到的是buttons属性
详细链接:https://uniapp.dcloud.net.cn/collocation/pages.html#app-titlenview
3.buttons
详细链接:
需要用的属性:
float fontSrc text等
![](https://img-blog.csdnimg.cn/img_convert/c5a16737fc54a440d736e7dd2013f3c5.png)
4.具体实现
代码展示:
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/index/index",
"style" :
{
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#ffffff",
"app-plus": {
"titleNView": {
"buttons": [
{
"float": "left",
"fontSrc":"./static/iconfont.ttf",
"text": "\ue63d"
},
{
"float": "right",
"fontSrc":"./static/iconfont.ttf",
"text": "\ue67a"
}
]
}
},
"enablePullDownRefresh": false
}
},
]
代码图片展示:
fontSrc:字体文件路径,我使用的是iconfont的图标,text:必须\u开头
![](https://img-blog.csdnimg.cn/img_convert/130f934ca803c4cef253fa79b26b5292.png)
效果实现图片:
![](https://img-blog.csdnimg.cn/img_convert/b18b2d7606c76b9381b751aae11fbb21.png)
三、微信小程序实现说明:
在index首页进行代码书写
图片展示:
![](https://img-blog.csdnimg.cn/img_convert/8c7115ea7daece2572d6416c12e5a9bd.png)
代码展示:
html部分:
<template>
<view>
<view class="wx-top">
<!-- 搜索图标 -->
<view class="iconfont icon-sousuo"></view>
<view>首页</view>
<!-- 消息图标 -->
<view class="iconfont icon-xiaoxi"></view>
</view>
</view>
</template>
css样式部分
<style lang="scss" scoped>
.wx-top{
display: flex;
justify-content: space-between;
padding: 0 40rpx;
text-align: center;
height: 200rpx;
line-height: 200rpx;
align-items:center;
.iconfont{
font-size: 40rpx;
}
.icon-sousuo{
font-size: 50rpx;
}
}
</style>
在style设置navigationStyle:custom重新设置导航,否则会出现两个标题
具体看点:
![](https://img-blog.csdnimg.cn/img_convert/0b01456de376832f6bd73ab0c10e8dc3.png)
代码图片:
![](https://img-blog.csdnimg.cn/img_convert/68d1ac58770002b033b70b7867202e79.png)
3.效果实现展示:
![](https://img-blog.csdnimg.cn/img_convert/0b5c1a24698f9a6e39f07b779ff6e40e.png)
四、兼容问题
此时大家一定以为这样微信小程序的顶部导航实现了,H5的顶部导航也有,就写完了?
此时是不对的
问题分析:此时H5端会出现两个顶部导航
原因:因为本身我们再page下设置titleNView就会再H5端实现顶部导航
再加上我们为了实现微信小程序端的我们子啊index.vue中手写了一段代码实现顶部,所以此时H5会出现两个顶部导航
图片展示:
![](https://img-blog.csdnimg.cn/img_convert/77dd4eeaa5b9f8b19bf771dd833ed1c6.png)
解决方法:(MP-WEIXIN)
只需要通过if在index.vue中进行判断即可
图片展示:
![](https://img-blog.csdnimg.cn/img_convert/ab99f113e0359de3ac7b3fc19f668ab6.png)
代码展示:
<!-- #ifdef MP-WEIXIN -->
<!-- MP-WEIXIN是微信小程序端 -->
<view class="wx-top">
<!-- 搜索图标 -->
<view class="iconfont icon-sousuo"></view>
<view>首页</view>
<!-- 消息图标 -->
<view class="iconfont icon-xiaoxi"></view>
</view>
<!-- #endif -->
五、整体代码展示
pages.json文件里:
![](https://img-blog.csdnimg.cn/img_convert/55272383bfc8f0bda417a8423e3629cf.png)
代码:
"app-plus": {
"titleNView": {
"buttons": [
{
"float": "left",
"fontSrc":"./static/iconfont.ttf",
"text": "\ue63d"
},
{
"float": "right",
"fontSrc":"./static/iconfont.ttf",
"text": "\ue67a"
}
]
}
},
index.vue文件里:
html部分
![](https://img-blog.csdnimg.cn/img_convert/63e869e71e7b84d5fb739e26137334f5.png)
代码:
<view>
<!-- #ifdef MP-WEIXIN -->
<!-- MP-WEIXIN是微信小程序端 -->
<view class="wx-top">
<!-- 搜索图标 -->
<view class="iconfont icon-sousuo"></view>
<view>首页</view>
<!-- 消息图标 -->
<view class="iconfont icon-xiaoxi"></view>
</view>
<!-- #endif -->
</view>
css部分:
.wx-top{
display: flex;
justify-content: space-between;
padding: 0 40rpx;
text-align: center;
height: 200rpx;
line-height: 200rpx;
align-items:center;
.iconfont{
font-size: 40rpx;
}
.icon-sousuo{
font-size: 50rpx;
}
}
![](https://img-blog.csdnimg.cn/img_convert/880d5e1f9eda5f04a91d6cc71aa5f206.png)
代码:
至此,这个顶部导航的一点兼容问题就结束了,如有不明白的欢迎大家的指正,希望能够共同进步,也谢谢大家的预览。