我是靠谱客的博主 霸气网络,这篇文章主要介绍uniapp开发饿了么微信小程序首页sticky粘性定位布局,现在分享给大家,希望可以做个参考。

position:sticky是css新增的一个属性,意为粘性定位,主要是用在对 scroll 事件的监听上,在滑动过程中,某个元素距离其父元素的距离达到 sticky 的要求时(比如给下图中的红色盒子添加样式position:sticky; top:20px);那么该红色盒子向上滚动,距离父元素的距离达到20px时,会固定到适当的位置,效果是relative与fixed的完美结合。

gift.gif

该新增属性的应用非常广泛,好东西大家都喜欢借鉴嘛~ 比如饿了么微信小程序端的首页布局中,对搜索框元素就采用了粘性布局,具体是怎么实现的呢?我们先来看一下整体效果(如下图 , 大家也可以打开饿了么微信小程序体验一把~)。

page.gif

template代码:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template> <!-- 粘性定位搜索盒子 --> <view class="search-box" :style="{top:top+'px'}"> <view class="ctn"> <view class="hx-search-box" @click="goSearch"> <view class="hx-search-text"> <uni-icons type="search" size="22" color="#666666" /> <text>鲜果大咖水果捞 20减12</text> </view> <view> <button class="search-txt">搜索</button> </view> </view> </view> </view> </template>
登录后复制

注意:这里给search-box盒子添加了动态属性top,这是因为在小程序端,搜索框在不同移动设备上具体父元素的距离是变化的。如何求动态的top属性值呢?

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script> 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; } } </script> <style> .search-box { position: sticky; z-index: 2; </style>
登录后复制

23.png

以上就是uniapp开发饿了么微信小程序首页sticky粘性定位布局的详细内容,更多请关注靠谱客其它相关文章!

最后

以上就是霸气网络最近收集整理的关于uniapp开发饿了么微信小程序首页sticky粘性定位布局的全部内容,更多相关uniapp开发饿了么微信小程序首页sticky粘性定位布局内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(271)

评论列表共有 0 条评论

立即
投稿
返回
顶部