脚本宝典收集整理的这篇文章主要介绍了uniapp开发饿了么微信小程序首页sticky粘性定位布局，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

template代码：

            <template>
                <!-- 粘性定位搜索盒子 -->
				<view class="seArch-box" :style="{top:top+&#39;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属性值呢？

    <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>

以上就是uniapp开发饿了么微信小程序首页sticky粘性定位布局的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的uniapp开发饿了么微信小程序首页sticky粘性定位布局全部内容，希望文章能够帮你解决uniapp开发饿了么微信小程序首页sticky粘性定位布局所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。