微信小程序自定义导航条

最新推荐文章于 2024-03-05 19:29:42 发布

。shinee

最新推荐文章于 2024-03-05 19:29:42 发布

阅读量374

点赞数

分类专栏：微信小程序文章标签：微信小程序自定义导航

本文链接：https://blog.csdn.net/jyy5806/article/details/102601428

版权

本文介绍了如何在微信小程序中自定义导航条，包括在app.json或页面json中设置参数，展示自定义导航条的效果图，以及通过获取高度并在wxml、app.js及页面js中设置样式来完成自定义。同时强调了导航条下方内容的样式调整，确保布局正常。

摘要由CSDN通过智能技术生成

上次写小程序，需要自己自定义导航条，因为设计改的效果，用现在有的导航无法满足，后来查阅了相关资料后， 完成了一个自定义导航条，如有侵权，请告知，立删。

微信的官方文档有一个参数是关于自定义导航条的，
在这里插入图片描述
就是这个如果全部导航都需要自定义，可在app.json中写入，如果只是修改某个页面，在当前页面的json中写入即可，
然后开始自定义导航，
先上效果图：

先 wxml:

<view class='nav' style='height:{
  {navH}}px'>
    <view class='title-icon'>
      <image src='../images/change1.png' style="width:150rpx;height:29rpx;" mode='aspectFit' class='back' bindtap='goMerchant'></image>
    </view>
    <view class='title-text'>
      <i