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

解决小程序下拉刷新 自定义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 滑动到底部触发

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

你可能感兴趣的:(小程序,自定义TabBar,下拉刷新,小程序)