position：sticky是css新增的一个属性，意为粘性定位，主要是用在对 scroll 事件的监听上,在滑动过程中，某个元素距离其父元素的距离达到 sticky 的要求时(比如给下图中的红色盒子添加样式position:sticky; top:20px)；那么该红色盒子向上滚动，距离父元素的距离达到20px时，会固定到适当的位置，效果是relative与fixed的完美结合。
该新增属性的应用非常广泛，好东西大家都喜欢借鉴嘛~ 比如饿了么微信小程序端的首页布局中，对搜索框元素就采用了粘性布局，具体是怎么实现的呢？我们先来看一下整体效果（如下图 , 大家也可以打开饿了么微信小程序体验一把~）。
template代码：
鲜果大咖水果捞 20减12
登录后复制
注意：这里给search-box盒子添加了动态属性top,这是因为在小程序端，搜索框在不同移动设备上具体父元素的距离是变化的。如何求动态的top属性值呢？
export default { data() {return {//在这里给到top属性一个默认的值为0 top: 0} }, onLoad() {// 获取手机系统信息 状态栏高度 const statusBarHeight = uni.getSystemInfoSync().statusBarHeight// 获取胶囊的位置const menuButtonInfo = uni.getMenuButtonBoundingClientRect() //导航栏的高度 = (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight) //top的值为状态栏的高度+导航栏的高度this.top = menuButtonInfo.bottom + menuButtonInfo.top - statusBarHeight; } } .search-box { position: sticky; z-index: 2;
登录后复制
以上就是uniapp开发饿了么微信小程序首页sticky粘性定位布局的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3030697.html
