微信小程序头部自定义搜索框斗鱼等

叁歲伎倆 2023-01-11 01:21 108阅读 0赞

##### 效果图 #####

![在这里插入图片描述][20210125170928649.png]

代码 app.js

App({
      onLaunch: function (res) {
        // 自定义标题栏测试
        const that = this;
        // 获取系统信息
        const systemInfo = wx.getSystemInfoSync();
        // 胶囊按钮位置信息
        const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
        // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
        that.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
        that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
        that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
        that.globalData.menuHeight = menuButtonInfo.height;
      },
      globalData: {
        navBarHeight: 0, // 导航栏高度
        menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
        menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）
        menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
      }
      
    })

##### wxml #####

<view class="nav-bar" style="height:{
       {navBarHeight}}px;">
        <input class="search" placeholder="搜索你要查找的展会" style="height:{
       {menuHeight}}px; min-height:{
       {menuHeight}}px; line-height:{
       {menuHeight}}px; left:{
       {menuRight}}px; bottom:{
       {menuBotton}}px;"></input>
    </view>
    
    
    <view class="content" style="margin-top:{
       {navBarHeight}}px;"></view>

##### wxss #####

.nav-bar {
      position: fixed;
      width: 100%;
      top: 0;
      color: #fff;
      background: #161b4f;
    }
    
    .nav-bar .search {
      width: 60%;
      color: #161b4f;
      font-size: 14px;
      background: #fff;
      position: absolute;
      border-radius: 50px;
      background: #ddd;
      padding-left: 14px;
    }

[20210125170928649.png]: /images/20221119/c21ddde3225046cbb69fc562e7336044.png