解决小程序下拉刷新 自定义TabBar 在安卓端会跟着下滑的问题。

思路关闭小程序默认的下拉刷新自定义下拉刷新

思路

这个是小程序存在已久的bug 官方一直没有修复，那么怎样用正确的姿势解决下拉刷新呢？

关闭小程序默认的下拉刷新

在index.json 中关闭，这样整个TabBar页就没有下拉刷新了 “enablePullDownRefresh”: false,

自定义下拉刷新

用到的标签：

<view style="height:100%;"> <scroll-view scroll-y="true" scroll-top="{{scrolltop}}" bindscroll="scroll" style="width:100%;height:100%" bindtouchstart="refstart" bindtouchend="touchend" > <view style="min-height:120%;"> <!-- 模拟下拉刷新 --> <view class="refreshBox text-center" wx:if="{{shouldRefresh}}"><image style="width:30rpx;height:30rpx;" src="{{icon}}"></image>{{refreshText}}</view> <view>正文内容</view> </view> </scroll-view> </view>

几个重要的函数： bindtouchstart （触摸开始函数） bindtouchend（触摸结束函数） bindscroll（滑动函数）

//自定义下拉刷新函数 refstart(){ console.log("触摸开始") if(!wx.sk.IsLogin){ return } this.setData({ istouching: true, refreshText: "下拉刷新...", icon:"/static/images/down.png" }) }, touchend(){ console.log("触摸结束") var that = this; that.setData({ refreshText: "刷新中...", icon: "/static/images/refresh.gif", scrolltop:20 }) that.loadData()//这个函数是你想要在本页面刷新的东西 setTimeout(function () { that.setData({ istouching: false }, 1000) if(that.data.shouldRefresh ==true){ that.setData({ shouldRefresh:false, }) } },500); }, scroll(e){ console.log("触发了滚动事件") if (this.data.istouching == false) { if (e.detail.scrollTop < 21) { this.setData({ scrolltop: 20 }) } return }else{ this.setData({ shouldRefresh: true }) if(e.detail.scrollTop<1){ this.setData({ refreshText: '松开刷新...', icon: "/static/images/down.png" }) } } }

data定义：

data:{ //下拉刷新 scrolltop:20, refreshText:null, icon:null, shouldRefresh:false, istouching:false, }

这就是完整的自定义刷新函数的思路，如果对您有用的话点个赞吧！

------------------------------------------------------分割线--------------------------------------------------------------------------------------------------

这么完成后发现一个小bug 就是滑动到底部也会触发下拉刷新…查看了一下微信官方文档后发现了这两个函数： bindscrolltoupper 滑动到顶部触发

bindscrolltolower 滑动到底部触发

利用这两个函数就可轻松解决。各位动动脑子想想该怎么处理吧！ 实在弄不懂得可以留言或私信我