-- 创造无限可能

微信小程序自定义顶部导航栏搜索框

2023-11-30 14:58:54
1437 人浏览 0 人点赞
有用,点赞支持一下

微信小程序自定义顶部导航栏搜索框(非组件)

一、隐藏原生navigationBar

  1. 全局自定义顶部导航栏
    在app.json的“window”里添加”navigationStyle”: “custom”

    "window": {
     "navigationStyle": "custom"
    }
    
  2. 单独页面自定义顶部导航栏
    在该页面的json文件里添加”navigationStyle”: “custom”

    {
    "usingComponents":{},
    "navigationStyle": "custom"
    }
    

二、获取系统及按钮信息,详细写法,请参考:https://blog.csdn.net/YN2000609/article/details/134212825

  1. js页面
    获取系统信息并计算按钮位置信息

  2. wxml页面
    通过获取的数据编写搜索框

  3. css页面
    美化搜索框

  4. app.js页面