微信小程序标题栏放logo 搜索框

效果图如下：

如果做成这样，标题栏上面放置自己的logo，绝对逼格满满，话不多说看操作：
第一步；选择你想要放置logo的页面，例如，index页面，找到此页面的json子页面，放置代码：

{"navigationStyle": "custom"}

第二步，首先我们要获取你手机顶部栏的高度，这时候需要在app.js文件里面写一个全局数据，

globalData: {// 头部的自定义的高度statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],}

第三步，这个时候我们要回到我们index页面的子页面index.js中，通过操作获取到我们的全局数据，

const app = getApp()
Page({/*** 页面的初始数据*/data: {// 头部导航栏的高度statusBarHeight: app.globalData.statusBarHeight,}}）

这个时候我们已经获取了你手机顶部栏的高度，现在我们开始使用这个高度数据，
第四步，当然是index.wxml 文件和 index.wxss文件的代码敲写，
index.wxml

<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px"><image class='nav_logo' src='/Icon/logo/dangpu.png'></image><view class='navInput' bindtap="schoolName" ><image src='/Icon/add_icon/address.png'></image><text>中国人民解放军武装警擦部队武汉武警指挥学院</text></view>
</view>
<view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>

index.wxss

/* 自定义导航栏开始 */
.custom{position: absolute;width: 100%;/* top: 0;left: 0; */height: 70px;/* background: #c00; */z-index: 999;background: #FFC640;
}
.nav_logo{float: left;margin-left: 22rpx;margin-top: 22rpx;margin-right: 15rpx;display: block;width:61rpx;height:47rpx;
}
.navInput{float: left;margin-top: 16rpx;/* width: 440rpx; */width: 60%;height: 58rpx;overflow: hidden;/* box-sizing: border-box; */padding-left: 60rpx;/* background: #eeeeee; *//* border-radius: 40rpx; */position: relative;overflow: hidden;  /* 超出一行文字自动隐藏 */text-overflow: ellipsis;  /*文字隐藏后添加省略号*/white-space: nowrap;   /*强制不换行*/
}
.navInput image{position: absolute;left: 12rpx;top: 13rpx;width:40rpx;height:40rpx;
}
.navInput text{font-size: 33rpx;color: white;
}
.empty_custom{height: 45px;width: 100%;
}/* 自定义导航栏结束 */

本人QQ：993583566 欢迎个人伙伴添加分享资源，共同学习。

微信小程序标题栏放logo 搜索框相关推荐

微信小程序标题栏加logo–基于IView-weapp
目录一.场景二.实现方案总结一.场景想要在自定义微信小程序自定义标题栏内容,也就是app.json中的"window"相同的内容.但是,在app.json文件中,个人没有 ...
微信小程序--自定义组件之搜索框
组件:搜索框功能:根据输入框输入值进行模糊查询并在下方滑动框中显示功能图: component.wxml   &l ...
微信小程序+vue+taro：搜索框
需求:获取输入框的值完整代码 <template><view><view class="join"><view class=" ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
【微信小程序】微信小程序--倒放音频的实现
微信小程序–倒放音频的实现注:灵感来源与玩法参考:https://www.bilibili.com/video/av76976000 设计思路: 1.微信小程序端:使用微信开发者工具实现微信小程序端 ...
微信小程序之toast等弹框提示
微信小程序中toast消息提示框只有两种显示的效果,就是成功和加载,使用wx.showToast(OBJECT). 看下有关参数说明: 代码很简单: wx.showToast({title: '成功' ...
微信小程序-006-投票功能-搜索投票
微信小程序-006-投票功能-搜索投票-2020-8-16 目录一.wxml 二.js pages/tools/vote/searchact/searchact 一.wxml <!--page ...
【微信小程序封装底部弹出框二】
[微信小程序封装底部弹出框二]  <view><button style="margin-top: 300px;" ...
微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列（7）
设置标题栏标题栏window 在app.json文件里面,通过window对象里面的属性进行设置示例: app.json: 运行: 设置导航栏导航栏TabBar 如果我们的小程序是一个多 tab ...

微信小程序标题栏放logo 搜索框

微信小程序标题栏放logo 搜索框相关推荐

最新文章

热门文章