微信小程序 下拉加载执行多次怎么破

微信小程序 下拉加载执行多次怎么破,第1张

//碰到过同样的问题, 下拉我用的 onReachBottom 事件

onReachBottom: function(){

let page_data = this.data

if(this.data.has_more == true) {

//防止重复、先直接设置FALSE,等返回值再设置

//不要问为啥has_more直接设置FALSE,因为他妹的request只有异步。。。setData可能没生效,所以你阻止不了事件

this.data.has_more = false

//你的request地址 p是分页地址,在yt_url里面对p++,判断是否有更多 has_more

let yt_url = ''

wx.request({

url: yt_url+'?p='+page_data.p,

data: {

},

header: {

'content-type': 'application/json'

},

success: function(res) {

resultData = res.data

this.data.p = resultData.p //设置页数为返回值的页数,因为setData没那么快。。

this.setData({

has_more : resultData.has_more,//设置页面

p: resultData.p,//是否还有更多

})

}

})

}

}

在小程序内存在列表等形式的页面内增加下拉刷新功能,提高用户体验感,加强界面 *** 作与交互性;

<a name="gXpSi"></a>

1、小程序提供的下拉刷新(无法自定义刷新动画)

可能遇到的问题:

1)下拉时没有出现刷新的点点动画

可能是因为设置的页面背景色与点点动画一致导致无法看到动画,可以在页面配置中配置背景文字颜色:

2、scroll-view内refresher-enabled属性开启自定义刷新

基本库要求:2.10.1

官方文档: scroll-view

3、原始scroll-view自定义下拉实现(为兼容2.10.1一下的下拉刷新

通过监听手指移动距离控制需要下拉模块的下拉距离,主要事件bindtouchstart,bindtouchmove和bindtouchend,bindtouchmove记录手指开始下拉时的起始位置,bindtouchmove计算下拉距离,bindtouchend判断并实现刷新方法。

我的自定义下拉组件(Taro框架)

<a name="fEutw"></a>

1、与ios上橡皮筋效果冲突导致下拉无法触发自定义刷新

页面配置 disabledScroll ,禁止页面滚动,同时页面内的列表滚动需要自己再优化调整;

2、scroll-view的scroll问题

需要设定固定高度然后纵向滚动。[我都忘了是啥问题了……

3、页面下拉刷新结束后再滑动列表出现闪屏

在禁止页面橡皮筋效果后,如果页面内存在需滚动区域使用scroll-view效果比view更加流畅;

不设定固定高度不会发生闪屏但是页面滚动非常不流畅;

4、使用官方提供的scroll-view自定义的动画时,当scroll-view内容不足充满一屏时下拉出现问题

将scroll-view设置固定高度后,将其子元素的高度设置多一像素达到隐形撑满的效果。

5、scroll-view内fixed元素问题

ios内scroll-view内fixed元素层级会出现问题,可能出现被遮挡的问题。

6、当页面内局部需要下拉刷新时可能导致内外两个滚动条问题

一个是页面滚动条一个是scroll-view滚动条,由于 *** 作的时候触发的是scroll-view部分的滚动导致页面滚动无法进行从而影响页面其他 *** 作。

Q5和Q6可以合并成一个问题,当页面需要一个吸顶 *** 作时,即滑动距离超过阈值时导航条吸顶的功能,若scroll-view将整个页面包含就会出现Q5的问题,可能导致在ios内吸顶的导航栏无法显示,若scroll-view只包含需要刷新的部分则会出现Q6的两个滚动条的问题。

1)在页面未触发吸顶时禁止scroll-view模块下拉,触发后放开滚动,同时会导致无法下拉。

2)页面滚动触发,scroll-view模块可下拉,但是滚动区域无法滚动,且下拉动画只显示一次。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/11275683.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-14
下一篇 2023-05-14

发表评论

登录后才能评论

评论列表(0条)

保存