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

效果图

代码 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><!-- 内容区域：自定义顶部栏用的fixed定位，会遮盖到下面内容，注意设置好间距
-->
<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;
}

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

微信小程序开发(3)——搜索框一键清除
小程序的input输入可以获取到实时输入数据,一键删除功能需要借助input的value属性 1.搜索框的数据获取要在<input>标签中设置bindinput='search'属性 & ...
微信小程序 - 商城项目 - 搜索框组件
搜索框组件引入自定义的搜索框组件引入扩展组件需要对搜索框组件实现一个粘性布局功能,引入官方的扩展组件 npm 安装扩展组件引入扩展组件构建 npm 实现粘性布局(在iphone5上可以实现, ...
微信小程序头部自定义
1.可以在全局设置使每一个页面头部都可以自定义在全局app.json设置"navigationStyle": "custom" "window&qu ...
微信小程序modal自定义文本框
 <button bindtap="Button" type="primary">弹出modal& ...
微信小程序头部导航栏自定义
微信小程序头部导航栏自定义参考网址微信开放文档 navigationStyle导航栏样式:仅支持以下值:default默认样式,custom 自定义导航栏,只保留右上角胶囊按钮配置示例 {&quo ...
微信小程序之自定义模态弹窗（带动画）实例
代码地址如下: http://www.demodashi.com/demo/13991.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序之底部弹框预约插件
代码地址如下: http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq. ...
第7课微信小程序实现图片搜索器案例：
第7课微信小程序实现图片搜索器案例: 效果图如下: 手机运行效果: 来我们来看看代码的全局样式: 首先在app.json内的pages把需要的index1.index2页面注册之后我们只需写ind ...
微信小程序可自定义单片机温湿度阈值(基于esp32c3+onenet+微信小程序)
前段时间有个粉丝问我能不能出一个微信小程序调节阈值的教程,我就下班之余在原来的基础上改进一下,因为是修改阈值,这里我就用继电器控制风扇.温度达到一定阈值控制风扇启动来做例子.这个成功了,其他阈值修 ...

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

效果图

wxml

wxss

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

最新文章

热门文章