我爱模板网 > 建站教程 > APP开发,混合APP >  uniapp向下滚动tabbar实现返回顶部正文

uniapp向下滚动tabbar实现返回顶部

我爱模板网在用uni-app开发小程序时,需要实现返回顶部的效果,具体来说就是默认第一个tabbar是首页,当往下滚动到一屏时,这个tabbar变成返回顶部,点击就可以滑动到顶端,效果图如下:

uni-app开发小程序

这个实现起来也很简单,下面是代码:

1、在data定义一个用来记录是否显示返回顶部的变量
data() {
    return {
        top: 0,
        isGoTop:false,
    }
},
2、置顶效果,即将tabbar变成返回顶部的代码,通过setTabBarItem设置第一个的样式即可:
setGoTop(){
    uni.setTabBarItem({
        index: 0,
        text: '置顶',
        iconPath: 'static/img/nav/gotop.png',
        selectedIconPath: 'static/img/nav/gotop.png'
    })
    this.isGoTop = true;
},
3、去除置顶效果,回复原来的效果
removeGoTop(){
    uni.setTabBarItem({
        index: 0,
        "iconPath": "static/img/nav/n1.png",
        "selectedIconPath": "static/img/nav/n1_active.png",
        "text": "亿鲜"
    })
    this.isGoTop = true;
},
4、返回顶部代码,即点击返回顶部,执行的代码
goTop(){
    uni.pageScrollTo({
        scrollTop: 0,
        duration: 100
    });
},
5、页面滚动监听,通过res返回的scrollTop和屏幕高度进行判断,超过一屏,就显示返回顶部,否则显示首页效果
onPageScroll(res){
    var scrollTop = res.scrollTop;
    if(scrollTop>getApp().globalData.screenHeight){
        this.setGoTop();
    }else{
        this.removeGoTop();
    }
},
6、tabbar点击监听
onTabItemTap(res){
    if(this.isGoTop){
        this.goTop();
        this.removeGoTop();
    }
}


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:uni-app scroll-view横向滚动的坑 下一篇:常用第三方APP 的url scheme合集,经常会用到
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢