微信小程序自定义标题栏（搜索框）

（小白学习笔记）

1.首先在需要更改页面的json文件中加入"navigationStyle":"custom" 与"usingComponents" 同级

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

如果需要整个项目所有页面都使用自定义标题栏，可以直接在app.json中的window中加入"navigationStyle":"custom"，那么你整个项目都会使用自己自定义的标题栏了

2.其次在index.wxml中加入

<!--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"></icon><input class="weui-input" name="search" placeholder="请输入关键字搜索"/></view></view></view><view class="test_b" style="margin-top:{{navH}}px">这是一个边框</view>
</view>

继续在index.wxss添加样式（如果需要全局就在app.wxss）

/* 头部搜索 */
.nav {width: 100%;overflow: hidden;position: relative;top: 0;left: 0;z-index: 10000000;position: fixed;
}.nav-title {width: 100%;height: 45px;line-height: 45px;text-align: center;position: absolute;bottom: 0;left: 0;z-index: 100000;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: rgb(255, 0, 0);
}.bg-gray {background-color: #f7f7f7;
}.overflow {overflow: auto;
}.hidden {overflow: hidden;
}.INinputheader {width: 60%;height: 30px;background: #efefef;border-radius: 30px;font-size: 14px;margin-top: 7px;position: relative;float: left;margin-left: 12px;
}.INsearchicon {position: absolute;left: 20rpx;width: 20rpx;height:20rpx;
}.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;
}
.text_b{display:flex;flex-decoration:column;align-items:center;height:1000rpx;
}

现在

wxml和wxss都写好了，因为手机各有差异，为了适配各种手机的顶部，常规的我们就需要获取标题栏的高度以此实现动态绑定高度，为了预防onLoad有时候不触发，我们直接在app.js的onLaunch的函数中加入代码：

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

直接获取高度，存放在与onLaunch同级

    globalData:{userInfo:null,navHeight:0},

接着，在需要使用的页面的js文件中先获取app，加入代码

const App = getApp();//设立顶部栏高度

获取到App实例，在onLoad中把获取到的放在data同级，即可在wxml中动态绑定使用

onLoad: function (options) {//自定义头部方法this.setData({navH: App.globalData.navHeight});},

微信小程序自定义标题栏（搜索框）相关推荐

微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
微信小程序自定义picker弹框组件
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 柚子写项目遇到了一个问题,就是微信小程序官方文档上面的弹框组件picker,它 ...
微信小程序——自定义下拉框
微信小程序本身并没有自带的下拉框组件,我们可以通过view标签自定义一个下拉框.(仅供参考) 目录文件目录实现效果实现逻辑设置数据设置默认选项实现弹出下拉框提供选项值设置所选值源码 ...
微信小程序自定义弹出框组件，模拟wx.showModal
微信小程序开发交流qq群 173683895 效果图: 代码 wxml <view wx:if='{{showModal}}'><view class='mask_layer' ...
微信小程序 - 商城项目 - 搜索框组件
搜索框组件引入自定义的搜索框组件引入扩展组件需要对搜索框组件实现一个粘性布局功能,引入官方的扩展组件 npm 安装扩展组件引入扩展组件构建 npm 实现粘性布局(在iphone5上可以实现, ...
微信小程序开发(3)——搜索框一键清除
小程序的input输入可以获取到实时输入数据,一键删除功能需要借助input的value属性 1.搜索框的数据获取要在<input>标签中设置bindinput='search'属性 & ...
微信小程序自定义复选框
微信官方给的复选框太丑,想要样式多样需要我们自己定义先来张效果图 wxml循环生成选框,从js里取数据,根据checked的值,改变标签的样式类 <view class="two { ...
微信小程序自定义弹出框
网上搜了一下感觉都没有好用的自定义弹框就自己手写了一个,方便以后CV 弹框可以点击按钮关闭,也可以点击空白关闭代码很简单 wxml <view bindtap="submit&quo ...
微信小程序自定义搜索框（searchbar）
微信小程序自定义搜索框(searchbar) 样式截图展示: 功能描述:微信小程序页面需要加入搜索框时,可以直接引用到页面中使用,当用户未输入任何关键字时如第一张图所示,当用户输入要搜索的关键字时如第 ...

微信小程序自定义标题栏（搜索框）

微信小程序自定义标题栏（搜索框）相关推荐

最新文章

热门文章