微信小程序自定义配置顶部栏（顶部栏搜索框）

2024年4月19日 165次阅读 来源: 随便的名字

配置信息app.json：

  "window": { 
    "backgroundTextStyle": "light",//非自定义字体位置
    "navigationBarBackgroundColor": "#fff",//非自定义背景颜色
    "navigationBarTitleText": "项目名",//标题
    "navigationBarTextStyle": "white",//右上交三个点和关闭按钮颜色只能配置黑白
    "navigationStyle": "custom"//自定义需要配置的内容
  },

因为要适配各种手机app.js配置

 // 获取顶部栏信息
    wx.getSystemInfo({ 
      success: res => { 
        //导航高度
        this.globalData.navHeight = res.statusBarHeight + 46;
      }, fail(err) { 
        console.log(err);
      }
    })

在globalData也配置信息

 globalData: { 
    userInfo: null,
    navHeight: 0
  }

app.js完整配置dome

App({ 
  onLaunch: function () { 
    // 获取顶部栏信息
    wx.getSystemInfo({ 
      success: res => { 
        //导航高度
        this.globalData.navHeight = res.statusBarHeight + 46;
      }, fail(err) { 
        console.log(err);
      }
    })
  },
  globalData: { 
    userInfo: null,
    navHeight: 0
  }
})

app.wxss样式

/* 自定义顶部栏高度 */
.nav{ 
  width: 100%;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
}
.nav-title{ 
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  font-family:PingFang-SC-Medium;
  font-size:36rpx;
  letter-spacing:2px;
}
.nav .back{ 
  width: 22px;
  height: 22px;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px 15px;
}
.bg-white{ 
  background-color:#FFCE58;
}
.bg-gray{ 
  background-color: #f7f7f7;
}
.overflow{ 
  overflow: auto;
}
.hidden{ 
  overflow: hidden;
}
.INinputheader{ 
  width:60%;
  height:30px;
  background:rgba(255,255,255,1);
  border-radius:30px;
  font-size: 14px;
  margin-top:7px;
  position: relative; 
  float: left;
  margin-left:12px;
}
.INsearchicon{ 
  position: absolute;
  left:12px;
}
.weui-input{ 
  height: 30px;
  line-height: 30px;
  text-align: left; 
  padding-left: 30px;
  letter-spacing:0px;
}
.INtab{ 
  text-align: left;
  margin-left: 12px;
  color: #fff;
}

现在配置完开始使用
index.wxml页面引用

<view>
  <!-- 自定义头部 -->
  <view class='nav bg-white' style='height:{ { navH}}px'>
    <view class='nav-title'>
      <view class="INinputheader">
        <icon class="INsearchicon" type="search" size="12"/>
        <input class="weui-input" placeholder="搜索学习内容"/>
      </view>
    </view>
  </view>
  <scroll-view class='bg-gray overflow' style='height:calc(100vh - { { navH}}px)' scroll-y >
    <view class='hidden'>
      <!-- 正文 -->
      <view>当前位置信息：</view>
    </view>
  </scroll-view>
</view>

index.js页面引用

const App = getApp();//设立顶部栏高度
Page({ 
	data:{ },
	onLoad: function (options) { 
    //自定义头部方法
    this.setData({ 
      navH: App.globalData.navHeight
    });
  }
})
    原文作者：随便的名字
    原文地址: https://blog.csdn.net/weixin_44402520/article/details/102836833
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞