小程序
小游戏
企业微信
微信支付
扫描小程序码分享
有一个需求:小程序的页面滚动距离超过指定位置时,将一个搜索框浮现出来,小于指定位置时,则影藏起来,我现在的做法是,页面onPageScroll回调函数中,实时检测是否滚动到对应的位置,然后用setData改变搜索框的样式,控制搜索所显示还是隐藏。
但是在实际测试过程中发现,当页面滚动到指定位置时,要等上好几秒,搜索框才会显示出来,从setData执行完到界面UI刷,有好几秒的延迟,请问这要如何处理?请各位大牛帮忙提供解决方法
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
理论上setData不应该会有好几秒这么长的延迟的,烦请提供一下机型,基础库版本和能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),我们这边定位一下问题。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
您好,我目前是在开发工具中测试的,开发工具的版本是v1.0.2.1803210,还没在真机上测试
那麻烦请提供一下代码片段。
/**
* 监听页面滚动时间处理函数
*/
onPageScroll(event) {
this .setSearchLocation(event);
},
getSearchLocation(){
//获取搜索框的dom信息
wx.createSelectorQuery().in( this ).select( '.search' ).boundingClientRect(rect => {
this .setData({ searchHeight: rect.height,searchTop: '-' + rect.height + 'px' });
}).exec();
getProductDom(){
//获产品列表的dom信息,产品列表的位置信息
let productDom = this .data.productDom;
if (!productDom) {
productDom = wx.createSelectorQuery().in( this ).select( '.productGrid' );
if (productDom){
this .setData({ productDom: productDom });
}
productDom.boundingClientRect(rect => {
this .setData({ productTop: rect.top });
setSearchLocation(scroll) {
//判断当前页面是否滚动到产品列表的位置,是则显示搜索框
if ( this .data.productTop){
if (scroll.scrollTop >= this .data.productTop) {
this .setData({ searchTop: '0px' });
} else {
this .setData({ searchTop: '-' + this .data.searchHeight + 'px' });
let productDom = this .getProductDom(); //
请参考后续链接中文档提供一下能够复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html )。
我也有这个问题。
这个问题,我有个建议,setdata外层在加一层判断,searchTop当前值和要设置的值一样就不要进行setdata了。
楼主解决了吗?安卓机一直有延迟问题?
的确有这个问题,onPageScroll中加入节流控制,setData后,会延长好几秒才会更新
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
理论上setData不应该会有好几秒这么长的延迟的,烦请提供一下机型,基础库版本和能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),我们这边定位一下问题。
您好,我目前是在开发工具中测试的,开发工具的版本是v1.0.2.1803210,还没在真机上测试
那麻烦请提供一下代码片段。
/**
* 监听页面滚动时间处理函数
*/
onPageScroll(event) {
this .setSearchLocation(event);
},
getSearchLocation(){
//获取搜索框的dom信息
wx.createSelectorQuery().in( this ).select( '.search' ).boundingClientRect(rect => {
this .setData({ searchHeight: rect.height,searchTop: '-' + rect.height + 'px' });
}).exec();
},
getProductDom(){
//获产品列表的dom信息,产品列表的位置信息
let productDom = this .data.productDom;
if (!productDom) {
productDom = wx.createSelectorQuery().in( this ).select( '.productGrid' );
if (productDom){
this .setData({ productDom: productDom });
}
}
if (productDom){
productDom.boundingClientRect(rect => {
this .setData({ productTop: rect.top });
}).exec();
}
},
setSearchLocation(scroll) {
//判断当前页面是否滚动到产品列表的位置,是则显示搜索框
if ( this .data.productTop){
if (scroll.scrollTop >= this .data.productTop) {
this .setData({ searchTop: '0px' });
} else {
this .setData({ searchTop: '-' + this .data.searchHeight + 'px' });
}
} else {
this .setData({ searchTop: '0px' });
let productDom = this .getProductDom(); //
}
}
请参考后续链接中文档提供一下能够复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html )。
我也有这个问题。
这个问题,我有个建议,setdata外层在加一层判断,searchTop当前值和要设置的值一样就不要进行setdata了。
楼主解决了吗?安卓机一直有延迟问题?
的确有这个问题,onPageScroll中加入节流控制,setData后,会延长好几秒才会更新