[已解决]微信小程序定制开发position: sticky又不支持

时间：2019-05-04 来源：小程序工厂

问题模块框架类型问题类型操作系统操作系统版本手机型号微信版本
客户端微信小程序 Bug Android 7.0 Honor8 6.7.2

菜单吸顶效果不能实现：
上周社区功能优化更新（09.03-09.07）前：
安卓机微信小程序中使用：position: sticky还可以，测了很多安卓机
上周社区功能优化更新（09.03-09.07）后：
安卓机微信小程序中使用：position: sticky，全挂。

微信小程序开发问题解答

微信小程序开发者回答：

一直有兼容性问题。。我是用相对位置API做的效果，实测的效果还不错
https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createIntersectionObserver.html

微信小程序开发者回答：

用这个方法在开发工具测试可以，但是安卓真机测试时，控制台警告信息 Node "#menu" is not found. Intersection observer will not trigger.不知道是为什么

微信小程序开发者回答：

可以截图看在你的代码吗？或者做个代码片段

微信小程序开发者回答：

用的wepy开发的，开发工具上可以，真机上不管是类选择器还是id选择器都找不到

微信小程序开发者回答：

加个this呢
this.observer = wx.createIntersectionObserver(this)

微信小程序开发者回答：

不行呢，出现其他的错误了，可能这种方式也确实是有兼容性问题吧

微信小程序开发者回答：

我是觉得 wepy 会改变 id 和 class的真是名字。。我这边用的原生的，用起来正常的哎。。你看看调试器里的 wxml ，是不是和你想的一样的

微信小程序开发者回答：

楼主解决这个问题了吗?我也遇到了!纳闷中

微信小程序开发者回答：

噗嗤。。楼主看不到的哦。。我看见了~ 截图看看你的代码呢？你是在组件里用的，还是在page里用的？

微信小程序开发者回答：

我在组件里用的
直接设置CSS
position: sticky;
position: -webkit-sticky;
z-index: 1000;
top: -1px;
然后实测苹果手机有效,安卓手机第一次进入有效,后面就凉了 - -!

微信小程序开发者回答：

因为不同情况下，微信小程序里用到的浏览器内核不同。。哈哈哈哈。。。

微信小程序开发者回答：

我知道呀!换一种实现方式可以吗?我一开始用的js的setData来控制,发现极不流畅,体验很差,然后查到有这个属性完全满足我的需求,开心的不行!现在跟我说安卓机上实现不了!兄弟,我凉了~~~~~ 呜呜呜~~~~~~~

微信小程序开发者回答：

用节点交互API啊，还可以。一直顶部有个隐藏的，然后界面滚动触发位置事件的时候，就显示。

微信小程序开发者回答：

要加 position: -webkit-sticky

微信小程序开发者回答：

加了，用position: -webkit-sticky（css方式）或者js一顿操作最后用fixed + absolute代替sticky（监听scrollTop值，最后还是回归到css），安卓中就是卡的飞起，在原生跟wepy中，唯一不卡的方式是加载几条数据（像严选砍价助手一样），或者固定页面（这样吸顶就没有意义），来个20条数据，字段多一些，我已用taro，看taro作者在感受到setData性能上有很大优化，准备试一下。

本文网址：http://www.91bianli.com/weixinxiaochengxu/46622.html

上一篇：修复时间确认

下一篇：canvas层级问题