微信小程序scroll事件/onPageScroll事件的延迟问题

需求

在前端开发中，我们经常会遇到一个需求，在页面进行滚动操作的时候，当页面其中的某个元素滚动到某个位置，我们就让该元素停留在该位置。等到滚动小于某个值的时候，再让该元素继续随着页面滚动。这就是我们平时说的吸顶效果。

实现方法

实现思路：定义一个isFixed属性，设置该属性的样式为position:fixed,当滚动到某个高度时，设置position:fixed样式，用滚动来监听事件，微信小程序中有onPageScroll事件，然后通过scrollTop值来设置isFixed
问题：如果我们单纯设置这样的类切换时，当我们想要吸顶的元素下面存在其他元素时，因为该组件/元素已经脱离了标准流，那么下面的元素会在吸顶元素脱离标准流的一瞬间往上面跳一下。
还有第二个问题，会延迟几秒
解决办法：我们可以在需要吸顶的组件下面设置一个样式相同的组件进行占位(该组件只是单纯进行占位），在触发吸顶事件时,使用wx:if控制其出现（hidden和wx:if的区别应该大家都知道。但是因为微信小程序的自定义组件不支持hidden属性，所以如果是自定义组件建议使用wx:if进行控制。如果是系统组件可以使用hidden）

wxml文件

<block wx:for="{{10}}" wx:key="list"><view class="text">我卢本伟没有开挂</view>
</block>
<view class="navbar-wrap"><view class="tab-control {{isFixed?'fixed':''}}" id="navbar"><view >tab1</view><view >tab2</view><view >tab3</view><view >tab4</view></view><!-- 用于吸顶后占位用的 --><view class="tab-control" wx:if="{{isFixed}}"></view>
</view>
<block wx:for="{{40}}" wx:key="list"><view class="text">我卢本伟没有开挂</view>
</block>

wxss

.navbar-wrap {width: 100%;
}
.text {background-color: pink;
}
.navbar-wrap .tab-control {width: 100%;height: 80rpx;display: flex;flex-direction: row;align-items: center;justify-content: space-around;background: #fff;border-bottom: solid 1px #eee;top: 0;left: 0;z-index: 100;
}
.fixed {position: fixed;
}

Page({data: {navbarInitTop: 0,isFixed: false, },onShow: function() {//获取当前组件到顶部的高度if (this.data.navbarInitTop == 0) {wx.createSelectorQuery().select('#navbar').boundingClientRect((rect) => {if (rect && rect.top > 0) {var navbarInitTop = rect.top;this.data.navbarInitTop = navbarInitTop}}).exec();}},onPageScroll: function(e) {var scrollTop = e.scrollTop;var isSatisfy = scrollTop >= this.data.navbarInitTop;this.setData({isFixed: isSatisfy});}
})

延迟问题

重点，敲黑板:
如果你直接使用上面的方法，会惊奇的发现，你的tab栏每次都会延迟一点点时间才能拼接上去，根本做不到无缝的吸顶效果。我一开始以为是 onPageScroll事件监听的响应速度问题，然后在错误的道路上一去不返。那么到底是什么导致我们屡试不爽的吸顶效果在小程序上会出现这种错误呢？我们看一下官方文档的解释：

频繁的去 setData 在我们分析过的一些案例里，部分小程序会非常频繁（毫秒级）的去setData，其导致了两个后果： Android
下用户在滑动时会感觉到卡顿，操作反馈延迟严重，因为 JS
1）线程一直在编译执行渲染，未能及时将用户操作事件传递到逻辑层，逻辑层亦无法及时将操作处理结果及时传递到视图层；
2）渲染有出现延时，由于WebView 的 JS线程一直处于忙碌状态，逻辑层到页面层的通信耗时上升，视图层收到的数据消息时距离发出时间已经过去了几百毫秒，渲染的结果并不实时；
每次setData 都传递大量新数据
由setData的底层实现可知，我们的数据传输实际是一次 evaluateJavascript 脚本过程，当数据量过大时会增加脚本的编译执行时间，占用 WebView JS 线程，
后台态页面进行 setData
当页面进入后台态（用户不可见），不应该继续去进行setData，后台态页面的渲染用户是无法感受的，另外后台态页面去setData也会抢占前台页面的执行。

事实就是，当我们在监听onPageScroll事件时，我们会一直调用setData方法修改isFixed的值，尽管在这个滚动过程中我们的isSatisfy值并没有改变。而且，官方也说到，在小程序开发中，使用最频繁的也是最容易引起性能问题的接口。所以在以后的开发中，如果遇到这种类似的卡顿的情况，大家可以先检查一下自己的this.setData方法。

说了这么多，解决方案呢？

其实只要我们想到了出现这个问题的原因，那么解决就是很简单了。

//为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等if (this.data.isFixedTop == isSatisfy) {return false;}else {this.setData({isFixedTop: isSatisfy});}

微信小程序scroll事件/onPageScroll事件的延迟问题相关推荐

微信小程序使用 setInterval 制作计时器后台延迟问题
微信小程序使用 setInterval 制作计时器后台延迟问题之前参加2020年微信小程序应用开发大赛的时候写了一个用于校园足球的微信小程序--踢在浙大. 在小程序的设计过程中出现了一个裁判工具的功 ...
微信小程序页面左右滑动事件+回到顶部
微信小程序提供了页面的上下滚动的事件,在页面的js文件中, page({ onPageScroll(e) { console.log(e.scrollTop) } }) 但是不是滑动事件,滑动事件需要 ...
按钮点击_如何设置微信小程序按钮点击事件？
当我们需要点击按钮实现一个操作时,我们应该怎么设置?这里给大家介绍两种方法: 方法一:使用小程序模板,无需懂技术. 这种方法比较简单,你只需要选一个比较简单的小程序模板,比如「上线了」sxl.cn,在 ...
微信小程序之阻止冒泡事件
众所周知,在微信小程序给标签绑定点击方法大家都会想到 "bindtap" 但是在页面中会遇到点击会冒泡而触发其他元素的时间发生那么怎么办呢就把引发冒泡事件的始作俑者的 bi ...
微信小程序——绑定点击事件
微信小程序出来了那么长时间了,之前一直准备升学和毕业设计(过段时间我要写一写我的毕业设计),最近马上毕业了,终于有时间来研究一下了,先从最简单的点击事件开始吧! 首先我们在test.wxml中加入以下 ...
微信小程序之触摸滑动事件案例+Slideview组件【手动左滑删除效果】
前言: 现在很多程序上都有左滑删除的效果,其实实现很简单,今天我们主要来记录一下小程序的左滑删除的实现过程. 效果图: 实现效果: 当我们在该条记录上进行左滑操作时,整条记录跟着向左移动,同时右侧的删 ...
微信小程序 “分享、转发”事件
微信小程序"分享.转发"功能 1.页内自定义分享 2.页面右上角"-"分享行为当页面js上没有添加事件"onShareAppMessage" ...
微信小程序存在的风险_浅谈微信小程序会中病毒事件
小程序其实是云端数据,不在软件里,所以小程序没有进入的端口,所以华为的管家也检测不出来,但是你按照腾讯的方法收索的话,就等于默认开通小程序,把你的数据放到云端,同时你拥有的账号就绑定了一大堆应用程序, ...
微信小程序点击电话事件跳到电话拨打
1. 拨打电话功能主要就是点击拨打电话的时候,可以跳转到手机上的拨打电话页面,并且将号码输入到上面,号码的话,可以是请求来的,也可以是固定的,也可以写一个input框手动输入,拨打电话功能比较简单 2 ...

微信小程序scroll事件/onPageScroll事件的延迟问题

需求

实现方法

延迟问题

说了这么多，解决方案呢？

微信小程序scroll事件/onPageScroll事件的延迟问题相关推荐

最新文章

热门文章