微客导航 » 文章资讯 » 微信小程序页面向下滚动时tab栏固定页面顶部实例讲解

微信小程序页面向下滚动时tab栏固定页面顶部实例讲解

2023-07-04 14:58:09 146

先看一下效果图：

index.wxml

特别说明：这里使用的tab标签页是iviewui的框架，地址：https://weapp.iviewui.com/components/tabs

index.wxss

.fixedTop{
width:100%;
position:fixed;
top:0;
z-index:99;
}

index.js

Page({
/**
*页面的初始数据
*/
data:{
tabcurrent:'tab1',
tabIsTop:false,
scrollTop:0,
},
/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){

},
ontabChange(event){
this.setData({active:event.detail});
},
//监听屏幕滚动判断上下滚动
onPageScroll:function(ev){
var_this=this;
//当滚动的top值最大或最小时，为什么要做这一步是因为在手机实测小程序的时候会发生滚动条回弹，所以为了处理回弹，设置默认最大最小值
if(ev.scrollTop<=0){
//滚动到最顶部
ev.scrollTop=0;
this.setData({tabIsTop:false});
}elseif(ev.scrollTop>wx.getSystemInfoSync().windowHeight){
//滚动到最底部
ev.scrollTop=wx.getSystemInfoSync().windowHeight;
}
//判断浏览器滚动条上下滚动
if(ev.scrollTop>this.data.scrollTop||ev.scrollTop==wx.getSystemInfoSync().windowHeight){
//向下滚动
this.setData({tabIsTop:true});
}else{
//向上滚动
}
//给scrollTop重新赋值
setTimeout(function(){
_this.setData({
scrollTop:ev.scrollTop
})
},0)
},
})

到此这篇关于微信小程序页面向下滚动时tab栏固定页面顶部实例讲解的文章就介绍到这了,更多相关微信小程序页面向下滚动时tab栏固定页面顶部内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

微信小程序页面向下滚动时tab栏固定页面顶部实例讲解

热门推荐

随机推荐