微信小程序搜索框吸顶效果实现

业务场景

主页要做一个搜索框，滑动主页页面的时候，搜索框始终位于导航栏下面，位置不变，不随页面的滑动而滑动，这种效果被称为”吸顶“效果。

点击搜索框，弹出上层搜索详情的视图层，搜索详情的整个页面覆盖在主页面之上，并且也覆盖住主要搜索框。

实现

主页搜搜框设置 position: sticky 和 top: 0 即可实现吸顶效果。

.searchbarView {position: sticky;top: 0;width: 100%;height: 40px;display: flex;align-items: center;background-color: white;/* background-color: aqua; */
}

点击搜索框弹出上层视图时发现，搜索框不能被覆盖：

需要在搜搜详情这个页面上也添加 top: 0 ，就会遮住搜索框

.searchView {display: flex;position: absolute;top: 0;height: 100%;width: 100%;background-color: rgb(0, 0, 0, 0.3);
}

效果：

微信小程序搜索框吸顶效果实现相关推荐

微信小程序中实现吸顶效果(流畅、不卡顿)
欢迎访问我的个人博客最开始的时候,在小程序中实现吸顶效果,开发工具看起来还挺好的,但是在真机上就会有问题了. 原因是我不停的去 setData 会导致操作反馈延迟严重,无法及时将操作处理结果及时传 ...
微信小程序导航头部吸顶效果
功能描述:当页面滚动到该元素的时候,变成固定的导航头部,也就是固定在最上面,当往回滑动时又变成原来的样子. 基本原理是: 1.获取要吸顶元素到页面顶部的高度 2.监听页面已经滚动的高度 3.将要吸顶元 ...
html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...
微信小程序搜索框实现模糊查询
目录前言一.概述二.步骤三.效果展示总结前言主要实现功能,无美化,如需请自设一.概述开发工具:微信开发者工具通过对微信原生组件input绑定事件实现对已获取的列表元素模糊查询的操作 ...
微信小程序搜索框回车搜索事件
这里写的是在微信小程序里的搜索框,按软键盘回车键触发搜索事件. 首先前台代码,这是整个搜索框代码 <view class="weui-search-bar"><v ...
微信小程序————搜索框获取本地缓存搜索记录
微信小程序获取本地缓存的搜索记录 html  //这里是搜索框 <view class="box_search">< ...
微信小程序实现滚动吸顶
1.实现效果 2.实现原理方法一:position:sticky简单粗暴,但存在部分机型不支持 1.position:sticky( position: -webkit-sticky): 类似pos ...
微信小程序搜索框自动补全功能
▶动态效果图◀ ▶效果涉及到的input属性◀ focus Boolean false 获取焦点 bindinput EventHandle ...
微信小程序搜索框以及简单的页面内容搜索的实现
1 效果先来看一下效果 2 设计思路 2.1 显示效果的设计本示例包含两种不同的搜索框,第一种搜索框是在最初状态下显示的搜索框,它由一个输入框input和一个表示"搜索"的图片 ...

微信小程序搜索框吸顶效果实现

业务场景

实现

微信小程序搜索框吸顶效果实现相关推荐

最新文章

热门文章