这篇文章主要介绍了微信小程序页面向下滚动时tab栏固定页面顶部实例讲解，文中图文实例讲解的很透彻，有需要的同学可以参考下。

先看一下效果图：

index.wxml

1. <view class='{{tabIsTop ? "fixedTop" : ""}}'> 
2. <i-tabs tabcurrent="{{tabcurrent}}" color="#FF0000" bindchange="tabChange"> 
3. <i-tab key="tab1" title="车主圈"></i-tab> 
4. <i-tab key="tab2" title="行业新闻"></i-tab> 
5. <i-tab key="tab3" title="养护宝典"></i-tab> 
6. <i-tab key="tab4" title="自驾游"></i-tab> 
7. </i-tabs> 
8. </view> 

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

index.wxss

1. .fixedTop { 
2.  width: 100%; 
3.  position: fixed; 
4.  top: 0; 
5.  z-index: 99; 
6. } 

index.js

1. Page({ 
2.  /** 
3.  * 页面的初始数据 
4.  */ 
5.  data: { 
6.  tabcurrent: 'tab1', 
7.  tabIsTop:false, 
8.  scrollTop: 0, 
9.  }, 
10.  /** 
11.  * 生命周期函数--监听页面加载 
12.  */ 
13.  onLoad: function (options) { 
14.    
15.  }, 
16.  ontabChange(event) { 
17.  this.setData({ active: event.detail }); 
18.  }, 
19.  //监听屏幕滚动 判断上下滚动 
20.  onPageScroll: function (ev) { 
21.  var _this = this; 
22.  //当滚动的top值最大或最小时，为什么要做这一步是因为在手机实测小程序的时候会发生滚动条回弹，所以为了处理回弹，设置默认最大最小值 
23.  if (ev.scrollTop <= 0) { 
24.   // 滚动到最顶部 
25.   ev.scrollTop = 0; 
26.   this.setData({ tabIsTop: false }); 
27.  } else if (ev.scrollTop > wx.getSystemInfoSync().windowHeight) { 
28.   // 滚动到最底部 
29.   ev.scrollTop = wx.getSystemInfoSync().windowHeight; 
30.  } 
31.  //判断浏览器滚动条上下滚动 
32.  if (ev.scrollTop > this.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) { 
33.   //向下滚动 
34.   this.setData({ tabIsTop: true }); 
35.  } else { 
36.   //向上滚动 
37.  } 
38.  //给scrollTop重新赋值 
39.  setTimeout(function () { 
40.   _this.setData({ 
41.   scrollTop: ev.scrollTop 
42.   }) 
43.  }, 0) 
44.  }, 
45. })

Tags: 页面向下滚动时

分享到：