开发作品页面

pages/works/index.js

@@ -12,9 +12,11 @@ import reachBottom from '~/mixins/reachBottom'
 Page({
   behaviors: [reachBottom],
   data: {
+    navBarHeight: app.globalData.navBarHeight,
     bannerList: [],
     // 1关注的人的作品，2是自己的作品
     currentType: '1',
+    isFixed: false
   },
   onShow() {
     if (typeof this.getTabBar === 'function') {
@@ -53,6 +55,21 @@ Page({
     }
   },
   /**
+   * 监听页面滚动事件
+   */
+  onPageScroll(e) {
+    console.log(e.scrollTop);
+    if (e.scrollTop >= 110 && !this.data.isFixed) {
+      this.setData({
+        isFixed: true
+      })
+    } else if (e.scrollTop < 110 && this.data.isFixed) {
+      this.setData({
+        isFixed: false
+      })
+    }
+  },
+  /**
    * 页面上拉触底事件的处理函数
    */
   onReachBottom() {

pages/works/index.less

@@ -5,6 +5,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    z-index: 20;
 
     .type {
       padding: 14rpx 0rpx;

pages/works/index.wxml

@@ -3,7 +3,7 @@
   <!-- 轮播图 -->
   <banner classify='1' />
   <!-- 切换类型 -->
-  <view class="selectType" bindtap="changeType">
+  <view class="selectType {{isFixed?'isFixed isFixed2':''}}" style="top:{{navBarHeight}}px;" bindtap="changeType">
     <view class="type {{currentType=='1'?'currentType':''}}" data-type='1'>关注作品</view>
     <view class="type {{currentType=='2'?'currentType':''}}" data-type='2'>我的作品</view>
   </view>

pages/works/index.wxss

@@ -3,6 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  z-index: 20;
 }
 .worksBox .selectType .type {
   padding: 14rpx 0rpx;