uniapp自定义顶部搜索框兼容微信小程序
zhuanzai: uniapp自定义顶部搜索框兼容微信小程序
自定义组件 navbarvue
(胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
<template>
<view class="navbar">
<view class="navbar-fixed">
<!-- 状态栏小程序撑起高度 -->
<view :style="{height:statusBarHeight+'px'}"></view>
<view class="navbar-content" :style="{height:navBarHeight+'px',width:windowWidth+'px'}">
<view class="navbar-search">
<view class="navbar-search_icon">
<uni-icons type="search" size="16" color="#999"></uni-icons>
</view>
<view class="navbar-serach">
<input class="navbar-search_text" type="text" v-model="val" placeholder="请输入您要搜索的内容" />
</view>
</view>
</view>
</view>
<!-- 需要添加占位符高度 状态栏高度+导航栏高度(否则下面tab会塌陷)-->
<view :style="{height: statusBarHeight+navBarHeight+'px'}"></view>
</view>
</template>
<script>
export default {
name: 'navbar',
data() {
return {
statusBarHeight: 20,/* 状态栏高度 */
navBarHeight: 45,/* 导航栏高度 */
windowWidth: 375,/* 窗口宽度 */
/* 设定状态栏默认高度 */
val: ''/* 导航栏搜索框的值 */
};
},
created() {
// 获取手机系统信息
const info = uni.getSystemInfoSync()
// 设置状态栏高度(H5顶部无状态栏小程序有状态栏需要撑起高度)
this.statusBarHeight = info.statusBarHeight
this.windowWidth = info.windowWidth
// 除了h5 app mp-alipay的情况下执行
// #ifndef H5 || APP-PLUS || MP-ALIPAY
// 获取胶囊的位置
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
console.log(menuButtonInfo);
// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight)
this.windowWidth = menuButtonInfo.left
// #endif
}
}
</script>
<style lang="less">
@import '../../common/css/icons.css';
@import './../../uni.less';
.navbar {
.navbar-fixed {
position: fixed;
top: 0;
left: 0;
z-index: 99;
width: 100%;
background-color: @mk-base-color;
.navbar-content {
display: flex;
justify-content: center;
align-items: center;
padding: 0 15px;
height: 45px;
box-sizing: border-box;
.navbar-search {
display: flex;
align-items: center;
padding: 0 10px;
width: 100%;
height: 30px;
border-radius: 30px;
background-color: #fff;
.navbar-search_icon {
// width: 10px;
// height: 10px;
margin-right: 10px;
}
.navbar-search_text {
width: 100%;
font-size: 14px;
color: #999;
}
}
&.search {
padding-left: 0;
.navbar-content__search-icons {
margin-left: 10px;
margin-right: 10px;
}
.navbar-search {
border-radius: 5px;
}
}
}
}
}
</style>
uni.less文件
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
*/
/* 颜色变量 */
@mk-base-color : #f07373;
/* 行为相关颜色 */
@uni-color-primary: #007aff;
@uni-color-success: #4cd964;
@uni-color-warning: #f0ad4e;
@uni-color-error: #dd524d;
/* 文字基本颜色 */
@uni-text-color:#333;//基本色
@uni-text-color-inverse:#fff;//反色
@uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息
@uni-text-color-placeholder: #808080;
@uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
@uni-bg-color:#ffffff;
@uni-bg-color-grey:#f8f8f8;
@uni-bg-color-hover:#f1f1f1;//点击状态颜色
@uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
@uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
@uni-font-size-sm:24rpx;
@uni-font-size-base:28rpx;
@uni-font-size-lg:32rpx;
/* 图片尺寸 */
@uni-img-size-sm:40rpx;
@uni-img-size-base:52rpx;
@uni-img-size-lg:80rpx;
/* Border Radius */
@uni-border-radius-sm: 4rpx;
@uni-border-radius-base: 6rpx;
@uni-border-radius-lg: 12rpx;
@uni-border-radius-circle: 50%;
/* 水平间距 */
@uni-spacing-row-sm: 10px;
@uni-spacing-row-base: 20rpx;
@uni-spacing-row-lg: 30rpx;
/* 垂直间距 */
@uni-spacing-col-sm: 8rpx;
@uni-spacing-col-base: 16rpx;
@uni-spacing-col-lg: 24rpx;
/* 透明度 */
@uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
@uni-color-title: #2C405A; // 文章标题颜色
@uni-font-size-title:40rpx;
@uni-color-subtitle: #555555; // 二级标题颜色
@uni-font-size-subtitle:36rpx;
@uni-color-paragraph: #3F536E; // 文章段落颜色
@uni-font-size-paragraph:30rpx;
uniapp自定义顶部搜索框兼容微信小程序的更多相关文章
- 【自定义轮播图】微信小程序自定义轮播图无缝滚动
先试试效果,可以通过设置参数调整样式 微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...
- uni-app开发经验分享二十: 微信小程序 授权登录 获取详细信息 获取手机号
授权页面 因为微信小程序提供的 权限弹窗 只能通用户确认授权 所以可以 写一个授权页面,让用户点击 来获取用户相关信息 然后再配合后台就可以完成登录 <button class="bt ...
- 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 使用uni-app开发微信小程序
uni-app 开发微信小程序 前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目, ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 微信小程序学习指南
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 1万字!彻底看懂微信小程序
Q:为什么说小程序如炮友? A:小程序刚发布不久就流行一个段子:APP如原配,一年不用几次:服务号如情人,一个月固定几次:订阅号如酒店小卡片,天天可以卖广告:小程序像炮友,用完就走. 资本如嫖客,各个 ...
- [转]微信小程序之加载更多(分页加载)实例 —— 微信小程序实战系列(2)
本文转自;http://blog.csdn.net/michael_ouyang/article/details/56846185 loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后 ...
随机推荐
- gogs安装与说明(docker)
作为一个开发,少不了和git打交道,像github,gitee是很流行的git线上托管平台,而我们也搭建自己的git托管平台,有条件的可以使用gitlab,它对硬件有要求,像博主这种没条件用虚拟机的, ...
- .net core系列源码地址介绍
很早就想写.net core相关教程内容了,但是一方面感觉东西太多了,一方面是太懒了,最近才下定决心,一定要写点东西出来,希望能支持一下国内.net 的尴尬处境 好了,先从.net core开源开始吧 ...
- docker容器的本质
1. 容器其实就是Linux下一个特殊的进程: 2. Docker容器通过namespace实现进程隔离通过cgroups实现资源限制: 3. Docker镜像(rootfs)是一个操作系统的所有文件 ...
- Swoole 中毫秒定时器(Timer)的使用
间隔定时器, tick 定时器会持续触发,直到调用 clear() 清除为止. $timer = Swoole\Timer::tick(3000, function (int $timer_id, $ ...
- 【白话科普】10s 从零看懂 H5
最近大家有没有发现,很多微信公众号的动态内容变多了?我们常常可以看到,公众号内容中有很多动态图片甚至动画,还可以通过手指滑动切换页面,或者有一些小的点击互动. 这种看起来有点高级的小作品,其实是都是& ...
- oracle 之 数组、嵌套表、SQL查询式 实现多表数据for循环插入指定表
1.基础环境 创建基础表: CREATE TABLE TEST_TAB1( ID INT, NAME VARCHAR2(20) ); CREATE TABLE TEST_TAB2( ID INT, N ...
- Pytest_参数化(10)
pytest参数化有两种方式: mark的parametrize标记:@pytest.mark.parametrize(变量名,变量值),其中变量值类型为列表.元组或其它可迭代对象. fixture的 ...
- python中addict模块,设置和读取嵌套字典
源码地址: https://github.com/mewwts/addict/blob/master/README.md
- AI系统——梯度累积算法
明天博士论文要答辩了,只有一张12G二手卡,今晚通宵要搞定10个模型实验 挖槽,突然想出一个T9开天霹雳模型,加载不进去我那张12G的二手卡,感觉要错过今年上台Best Paper领奖 上面出现的 ...
- Centos安装DenyHosts
一.背景 个人申请的腾讯云主机被扫描端口,数百次登录失败的尝试 解决方法:安装工具,记录并屏蔽恶意访问. 二.检查环境 系统安装的sshd是否支持tcp_wrappers(默认都支持) ldd /us ...