关于position: sticky在小程序中IOS真机下，偶然失效的问题总结

虽然小程序中有大把的自定义sticky组件可用，原理无非是监听页面滚动改变position来实现，实际体验上卡顿感难以避免，跟原生的position: sticky比还是有很大距离。
最近写的页面已经开始逐渐用上原生position: sticky，在测试中发现IOS真机下，某些场景的sticky会失效，花了点时间研究，得出来以下结论：

IOS必须加上position: -webkit-sticky;
IOS下sticky的元素必须与占位元素在同一个作用域下面，才生效

直接在页面中写`sticky`有效

page.wxml

<view style="height: 100px">title</view>
<view style="position: -webkit-sticky; position: sticky; top: 40px">sticky</view>
<view style="height: 200vh"></view>

`sticky`定义在组件内，占位元素在页面里，安卓及模拟器有效，IOS真机无效

components.wxml

<view style="position: -webkit-sticky; position: sticky; top: 40px">sticky</view>

page.wxml

<view style="height: 100px">title</view>
<components/>
<view style="height: 200vh"></view>

`sticky`定义在组件内，占位元素在组件插槽内，有效

components.wxml

<view style="position: -webkit-sticky; position: sticky; top: 40px">sticky</view>
<slot/>

page.wxml

<view style="height: 100px">title</view>
<components><view style="height: 200vh"></view>
</components>

如果你想开发小程序或者了解更多关于小程序的内容，欢迎关注厦门在乎科技-专注厦门小程序开发、app开发、网站开发、H5小游戏开发

关于position: sticky在小程序中IOS真机下，偶然失效的问题总结相关推荐

微信小程序中，真机和模拟器效果不一样
问题:有时候,在模拟器上UI效果显示正常,但是在android上显示的UI布局就乱了.这其中一种可能是因为父组件设置了属性 box-sizing: border-box;子组件加起来的宽度超过了父组件 ...
微信小程序背景图真机显示不了
微信小程序在本地开发工具正常显示图片(包括背景图),在真机显示不了,常见的几种情况: 1.微信小程序背景图真机显示不了微信小程序如何设置背景图片? | 微信开放社区微信小程序设置背景图片不显示问题 ...
微信小程序开发者工具真机调试和预览连接本地服务器
微信小程序开发者工具真机调试连接本地服务器网上参考了很多方法只有这个方法能解决本地服务器在微信开发者工具预览或者真机调试的连接,话不多说看图. 第一步 win+R,CMD输入ipconfig查看本地 ...
微信小程序中IOS获取不到时间（年、月）
微信小程序中获取时间戳IOS不兼容 new Date("2017-06-16") 在IOS会出现NAN的情况所以对于时间转换需要另行封装,解决方案如下把"-" ...
微信小程序在IOS真机时间显示NaN
微信小程序在苹果真机时间显示NaN IOS系统不支持2018-08-30这样的格式的时间进行格式化如果后端返回的数据格式是直接显示在界面没有问题如果要格式话就得用new Date(),模拟器没 ...
php 发送微信请求失败的原因,微信小程序模拟正常真机服务器请求出错
微信小程序中出现最多的一个问题,就是真机跟本地不同:我简单列举一些我发现的原因,给大家参考,大家也可以把自己发现的东西回复给我,给我参考: 本地看不到数据,就先让本地能看到数据,再看本帖.... 1: ...
微信小程序showToast在真机中显示时间不可控制，显示时间短
现象: 使用uniapp开发微信小程序,使用showToast,设置duration来控制提示展现时长,发现在微信开发者工具正常,在真机中显示时间比较短,并且设置duration不生效. 原因: 排查 ...
小程序 text decode 真机无效_【移动端测试】APP自动化测试案例2：微信小程序自动化测试...
APP自动化测试之案例:微信小程序自动化测试 1.前提基于win10专业版64位系统+jdk1.8+python3+pycharm+android SDK+appium+unittest. 2.痛点 ...
微信小程序使用Echarts真机调试报错，Echarts占内存过大解决方法
Echarts真机调试报错解决办法:给组件添加force-use-old-canvas="true"属性就可以在真机调试里展示. 重点:发布线上时,一定要将这句去掉,现在只是不支 ...

关于position: sticky在小程序中IOS真机下，偶然失效的问题总结

直接在页面中写`sticky`有效

`sticky`定义在组件内，占位元素在页面里，安卓及模拟器有效，IOS真机无效

`sticky`定义在组件内，占位元素在组件插槽内，有效

关于position: sticky在小程序中IOS真机下，偶然失效的问题总结相关推荐

最新文章

热门文章

关于position: sticky在小程序中IOS真机下，偶然失效的问题总结

直接在页面中写sticky有效

sticky定义在组件内，占位元素在页面里，安卓及模拟器有效，IOS真机无效

sticky定义在组件内，占位元素在组件插槽内，有效

关于position: sticky在小程序中IOS真机下，偶然失效的问题总结相关推荐

最新文章

热门文章

直接在页面中写`sticky`有效

`sticky`定义在组件内，占位元素在页面里，安卓及模拟器有效，IOS真机无效

`sticky`定义在组件内，占位元素在组件插槽内，有效