[wechart] 微信小程序使用粘性定位position: sticky的注意事项(避坑)

前言：
position: sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
使用：
#sticky-nav {
position : sticky ;
top : 100px ;
}
设置position:sticky同时给一个(top,bottom,right,left)之一即可
使用条件：
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效

转载自: css粘性定位position：sticky

一开始应用于小程序发现粘性定位没有作用? 其实不然, 是因为小程序的状态栏和导航栏的高度, 导致看不出粘性定位的效果, 设置top为200px再滚动你就会发现滚动成功了.为什么会这样?

原因就是因为使用了自定义头部!!!

不太明白我说什么? 看图:

然后滚动发现:

被状态栏和导航栏遮住达不到需求, 所以top = 状态栏高度 + 导航栏高度

以上出现塌陷的原因就是因为使用了自定义头部!!!

解决办法:

// JS -----------------
// 获取手机状态栏高度 状态栏 + 导航栏高度
getTopHeight() {const { statusBarHeight } = wx.getSystemInfoSync(); //拿到的状态栏高度单位是pxthis.topHeight = statusBarHeight + 44; // 44是因为我的导航栏是自定义的, 且高度为44px
},// HTML
<view :style="{ top: topHeight + 'px' }"></view>

拓展:

如果在使用粘性定位的时候, 且页面在ios下出现了左右拖动的Bug.

那么上网搜索找到的解决办法基本是:

.cur_page {width:100%;overflow-x:hidden;
}

overflow-x: hidden;解决了左右拖动的Bug, 但是会导致粘性定位失效(文章开头有介绍到overflow: hidden会使sticky失效),

所以最好的解决办法是给会导致左右拖动的区域添加:

<scroll-view scroll-y="true"><!-- ios会产生拖动的区域 -->
</scroll-view>

网上还有一种方法是(未尝试过, 尝试过的小伙伴可以留言哈):

在页面的.json中添加一条配置即可解决这个问题.
"disableScroll" :true

来自: 小程序列表左滑效果在IOS呈上下滑动影响样式

[wechart] 微信小程序使用粘性定位position: sticky的注意事项(避坑)相关推荐

wechart微信小程序遇到的问题总结（一）
wechart微信小程序遇到的问题总结(一) 一.如何从vue项目跳回到微信小程序页面 1.步骤 (1)在VUE项目中引入跳转到微信小程序需要的api模块连接 (2)在事件函数中调用微信小程序跳转ap ...
微信小程序实现简单定位功能
微信小程序实现简单定位功能,简单易读,获取经纬度信息在pages下创建一个单页如local local.js如下 var app = getApp() Page({ data:{latitude:' ...
uniapp 微信小程序，开启定位权限，permission ： scope.userLocation
uniapp 微信小程序,开启定位权限,scope.userLocation 问题在网上看了好多帖子,一言两语,想骂人, 解决注意uniapp项目在manifest.json 文件下配置,不要迷路 ...
onenetsim定位功能吗_微信小程序新增后台定位功能，你会卸载地图APP用微信导航吗...
[PConline]8月8日,根据微信官方发布的消息显示,小程序新增后台定位功能,并对自动化测试功能进行了升级.据介绍,为了满足线路导航.路线记录等服务场景下,小程序需要长时间持续定位来提供服务.当用 ...
微信小程序实现地图定位
前言地图定位这个功能大家都很熟悉吧,那大家知道微信小程序中要怎么实现地图定位呢,其实非常简单,看完本篇文章,你也可以轻松实现这个小功能. 1.首先呢你要有一个方法去触发这个点击事件,下面已经写好啦, ...
浅谈微信小程序的功能定位和使用场景
作者主页:Designer 小郑作者简介:浙江某公司软件工程师,负责开发管理公司OA.CRM业务系统,全栈领域优质创作者,CSDN学院.蓝桥云课认证讲师,开发过20余个前后端分离实战项目,主要发展方 ...
微信小程序后台持续定位功能使用
微信小程序团队在7月30日更新了基础库 2.8.0 其中新添加了小程序后台持续定位功能和联系定位的接口从上到下分别是 1.wx.onLocationChange//监听位置实时变化 2.wx.st ...
uniapp：微信小程序，获取定位省市区街道信息
关于微信小程序定位省市区信息,超详细教程,傻瓜式操作,根据我的文章一步一步操作即可实现定位. 准备工作,申请腾讯位置服务微信小程序JavaScript SDK 1.第一步先申请密匙,进入key设置 2 ...
微信小程序API——获取定位
在微信小程序中,我们可以很方便的通过API接口来获取我们当前的位置,接下来我讲告诉大家微信获取定位的API-wx.getLocation的用法,以及我们通过获取定位,得到当地的位置,天气等信息. &l ...
微信小程序地图显示与定位快速实现
最近在做微信小程序的开发,不得不说,入伙你会vue的话,小程序开发轻而易举,原理是一样的,而且比vue更简单.这里主要是利用了小程序提供的腾讯地图展示接口和定位接口进行实现的.非常方便,下面就说一下代 ...

[wechart] 微信小程序使用粘性定位position: sticky的注意事项(避坑)

不太明白我说什么? 看图:

然后滚动发现:

解决办法:

拓展:

[wechart] 微信小程序使用粘性定位position: sticky的注意事项(避坑)相关推荐

最新文章

热门文章