微信小程序双击底部导航栏刷新页面

参考了某团和某宝,单击或双击底部tab刷新当前页面

但是tab如果不是自定义的tab,并没有双击事件,所以大概思路就是判断第一次点击时间和第二次的点击时间,如果小于3000ms,就刷新列表,回到顶部

还有就是当屏幕滚动到一定高度之后,动态替换当前页面的tab图片

  • 首先是达到一定高度动态切换当前页面tab图片
/**
  * @name      获取滚动高度
  * @date      2021-04-01
  */
   getScrollTop(e){
    
    
      let {
    
    scrollTop}=e.detail
      //保存滚动高度
      this.setData({
    
    
        goodsListScrollTop:scrollTop
      })
      // 判断当前列表滚动高度决定当前页面tab项的图片
      this.setTabItemIcon(scrollTop)
   },
   /**
   * @name      设置当前页面tab图片
   * @date      2021-04-01
   */
  setTabItemIcon(top){
    
    
    if(top>300){
    
    
    //设置当前页面tab图片(大于300换成回到顶部的icon)
      wx.setTabBarItem({
    
    
        index: 0,//当前tab的索引(从左侧开始)
        text: '回顶',
        iconPath: '/static/images/dbGoTop.png',
        selectedIconPath: '/static/images/dbGoTop.png'
      })
    }else{
    
    
    //(小于300换回首页tab的icon)
      wx.setTabBarItem({
    
    
        index: 0,
        text: '首页',
        iconPath: "/static/images/icon_home_light.png",
        selectedIconPath: "/static/images/icon_home_full.png"
      })
    }
  },
  • 其次,在写双击底部tab事件
//点击tab
onTabItemTap(i){
    
    
    //获取当前时间
    let time=Date.parse(new Date()) 
    let {
    
    clickTabTime,goodsListScrollTop}=this.data
    //如果当前时间大于上一次点击时间2000并且滚动高度大于0
    if((clickTabTime&&time-clickTabTime<2000)&&goodsListScrollTop!=0){
    
    
        //刷新列表
      this.getGoodsList(1,false)
      //回到顶部
      this.setData({
    
    
        scrolltop:0,
        goodsListScrollTop:0
      })
    }else{
    
    
        //如果不满足上面的的条件就保存当前时间
      this.setData({
    
    
        clickTabTime:time
      })
    }
  },

完事儿了

(多看看注释哈)

猜你喜欢

转载自blog.csdn.net/glorious_future/article/details/115404896