参考了某团和某宝,单击或双击底部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
})
}
},
完事儿了
(多看看注释哈)