小程序页面向下滚动时tab栏固定页面顶部 微信小程序页面向下滚动时tab栏固定页面顶部实例讲解
祝君圆梦 人气:0想了解微信小程序页面向下滚动时tab栏固定页面顶部实例讲解的相关内容吗，祝君圆梦在本文为您仔细讲解小程序页面向下滚动时tab栏固定页面顶部的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：小程序,tab栏固定页面顶部,小程序页面向下滚动，下面大家一起来学习吧。
先看一下效果图：
index.wxml
<view class='{{tabIsTop ? "fixedTop" : ""}}'>
<i-tabs tabcurrent="{{tabcurrent}}" color="#FF0000" bindchange="tabChange">
<i-tab key="tab1" title="车主圈"></i-tab>
<i-tab key="tab2" title="行业新闻"></i-tab>
<i-tab key="tab3" title="养护宝典"></i-tab>
<i-tab key="tab4" title="自驾游"></i-tab>
</i-tabs>
</view>
特别说明：这里使用的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 });
} else if (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)
},
})
加载全部内容