讨论在小程序中实现仿支付宝的吸顶效果

最新推荐文章于 2022-03-08 10:36:38 发布

堕落的咸鱼

最新推荐文章于 2022-03-08 10:36:38 发布

阅读量1.4k

点赞数

分类专栏：小程序文章标签：小程序滚动监听

本文链接：https://blog.youkuaiyun.com/qq_41064446/article/details/86591052

版权

本文讨论了在小程序中模仿支付宝的吸顶效果。主要思路包括：获取相关元素高度，通过滚动监听和设置scrollY属性实现。提出了两种方法，一种是利用bindscroll监听滚动并设置滚动锚点，另一种是根据滚动位置改变菜单块的class。然而，两种方法在安卓手机上都存在滚动监听延迟的问题。最后，由于未能找到更优方案，建议谨慎采用此类设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

支付宝实现效果

实现思路1

页面加载时获得#rmtj 及#list1~#list5的高度，scrollY默认值为false，当点击tab标签或滚动到特定位置是设置scrollY为true

核心方法
（1）设置元素id=“rmjt”，获取元素高度

	  var query = wx.createSelectorQuery();
      query.select('#rmtj').boundingClientRect();
      query.exec(function (res) {
          _this.setData({
               res[0].height
          });
      });`

（2）<scroll-view scroll-y bindscroll="pageScroll" scroll-into-view="{ {container}}">
通过bindscroll监听滚动距离，通过scroll-into-view设置滚动锚点