uniapp 吸顶悬停实现方法
吸顶悬停,是在小程序开发中常见的需求。
过去常见的实现方法就是通过js监听滚动事件然后改变需要吸顶悬停元素的css来实现。
其大致思路如下:
1. 计算需要吸顶元素到顶部的距离
2. 通过js监听滚动事件,达到距离后,改变需要吸顶元素的样式,典型的如:position: fixed。元素脱离了文档流,为避免其他元素改变位置,还需要设置一占位元素。
实现原理,并不复杂,但是需要注意的细节却不少。另外,因为需要监听滚动事件,效率也是比较低的。
现在在小程序中有了一种更加简单高效的实现方式,就是:position sticky。
position sticky只在一些比较新的浏览器上才支持,不过实验了一下,发现现在各个小程序平台都是支持的!
那么现在使用uniapp开发小程序的时候,需要一个元素吸顶悬停,只需要为这个元素添加以下样式:
position: -webkit-sticky;
position: sticky;
top: var(--window-top);
-
可以使用 vue 开发微信小程序吗如何使用 vue 开发小程序
-
uniapp 中使用 vuex,vue2 和 vue3 的区别在 uniapp 中如何引入 vuex
-
支付宝小程序INVALID_PARAMETER(订单数据同步报错)支付宝小程序订单中心提示 INVALID_PARAMETER(参数有误,不同情况下的 sub_msg 可能不同)。
-
支付宝小程序搜索关键词提示 BIZ_ERROR(没有操作权限)支付宝小程序搜索关键词提示 BIZ_ERROR(没有操作权限),错误原因可能是搜索服务工单的 appId,其所属的商家并未授权给当前操作用户
-
微信小程序移除插屏广告关闭事件的监听函数InterstitialAd.offCloseInterstitialAd.offClose是微信小程序移除插屏广告关闭事件的监听函数。onClose 传入的监听函数。不传此参数则移除所有监听函数。
-
微信小程序wx.getExtConfig获取第三方平台自定义的数据字段wx.getExtConfig是微信小程序获取第三方平台自定义的数据字段函数。
暂无评论,抢个沙发...