开发固定动画效果

app.wxss

@@ -1,52 +1,72 @@
 /**app.wxss**/
 page {
-    width: 100%;
-    /* min-height: 100%; */
-    color: #333;
-    font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
-    background: #F2F6FC;
+  width: 100%;
+  /* min-height: 100%; */
+  color: #333;
+  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+  background: #F2F6FC;
 }
 
 view {
-    font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
 }
 
 text {
-    font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
 }
 
 .container {
-    height: auto;
-    box-sizing: border-box;
-    font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+  height: auto;
+  box-sizing: border-box;
+  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
 }
 
 #share {
-    width: 375px;
-    height: 300px;
-    position: absolute;
-    left: -999rpx;
-    top: -9999rpx;
+  width: 375px;
+  height: 300px;
+  position: absolute;
+  left: -999rpx;
+  top: -9999rpx;
 }
 
 .textOver {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .resetBtn {
-    padding: 0px;
-    margin: 0;
-    line-height: normal;
-    background-color: transparent;
+  padding: 0px;
+  margin: 0;
+  line-height: normal;
+  background-color: transparent;
 }
 
 .resetBtn::after {
-    border: none;
+  border: none;
 }
 
 .seat {
-    height: 100rpx;
-    padding-bottom: env(safe-area-inset-bottom);
+  height: 100rpx;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.isFixed {
+  position: fixed;
+  z-index: 999;
+}
+
+.isFixed2 {
+  width: 100%;
+  box-sizing: border-box;
+  background-color: white;
+  box-shadow: 0px 26rpx 24rpx rgba(0, 0, 0, 0.1);
+  border-bottom-left-radius: 24rpx;
+  border-bottom-right-radius: 24rpx;
+  padding: 20rpx 15rpx 20rpx 26rpx !important;
+}
+
+.brace {
+  /* 高度为一级分类的高度再加一丢丢 */
+  height: 260rpx;
 }

components/videoPreview/index.less

@@ -3,6 +3,7 @@
     background-color: white;
     border-radius: 32rpx;
     box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
+    padding-bottom: 20rpx;
 
     .workHead {
         display: flex;
@@ -136,34 +137,49 @@
     }
 
     .workFooter {
+        margin-top: 15rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 14rpx 20rpx 30rpx;
 
-        .mange {
-            margin-top: 15rpx;
+        .mangeL-box {
             display: flex;
-            justify-content: space-between;
             align-items: center;
-            padding: 14rpx 20rpx 30rpx;
+            margin-right: 30rpx;
 
-            .mangeL {
-                display: flex;
-                align-items: center;
+            .icon {
+                width: 44rpx;
+                height: 44rpx;
+            }
 
-                .mangeL-box {
-                    display: flex;
-                    align-items: center;
-                    margin-right: 30rpx;
+            .icon-name {
+                margin-left: 8rpx;
+                font-size: 28rpx;
+            }
+        }
+    }
 
-                    .icon {
-                        width: 44rpx;
-                        height: 44rpx;
-                    }
+    .toReading {
+        width: 166rpx;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 12rpx 32rpx;
+        border-radius: 50rpx;
+        background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
+        box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
+
+        .reading {
+            width: 24rpx;
+            height: 32rpx;
+        }
 
-                    .icon-name {
-                        margin-left: 10rpx;
-                        font-size: 28rpx;
-                    }
-                }
-            }
+        .reading-text {
+            color: white;
+            font-size: 30rpx;
+            margin-left: 12rpx;
         }
     }
 }

components/videoPreview/index.wxml

@@ -52,29 +52,27 @@
         </video>
     </view>
     <view class="workFooter">
-        <view class="mange" wx:if="{{videoInfoCopy.userRead.status!='CHECK'}}">
-            <view class="mangeL" bindtap="collect">
-                <button class="resetBtn mangeL-box" open-type="share" data-info='{{videoInfo}}'>
-                    <image src="/static/share.png" mode="" class="icon" />
-                    <view class="icon-name">分享</view>
-                </button>
-                <view class="mangeL-box">
-                    <image src="{{videoInfoCopy.isFavorites ? '/static/star_colored.png' : '/static/star.png'}}" mode=""
-                        class="icon" />
-                    <view class="icon-name">{{item.isFavorites}}</view>
-                </view>
-            </view>
-            <view class="mangeL">
-                <view class="mangeL-box" bindtap="likeVideo">
-                    <image src="{{videoInfoCopy.isLike ? '/static/heart_colored.png' : '/static/heart.png'}}" mode=""
-                        class="icon" />
-                    <view class="icon-name">{{filters.numFilter(videoInfoCopy.userRead.likeAmount)}}</view>
-                </view>
-                <view class="mangeL-box" bindtap="openComment">
-                    <image src="/static/comment.png" mode="" class="icon" />
-                    <view class="icon-name">{{filters.numFilter(videoInfoCopy.userRead.commentAmount)}}</view>
-                </view>
-            </view>
+        <button class="resetBtn mangeL-box" open-type="share" data-info='{{videoInfo}}'>
+            <image src="/static/share.png" mode="" class="icon" />
+            <view class="icon-name">分享</view>
+        </button>
+        <view class="mangeL-box">
+            <image src="{{videoInfoCopy.isFavorites ? '/static/star_colored.png' : '/static/star.png'}}" mode=""
+                class="icon" />
+            <view class="icon-name">{{item.isFavorites?'已收藏':'收藏'}}</view>
+        </view>
+        <view class="mangeL-box" bindtap="openComment">
+            <image src="/static/comment.png" mode="" class="icon" />
+            <view class="icon-name">{{filters.numFilter(videoInfoCopy.userRead.commentAmount)}}</view>
         </view>
+        <view class="mangeL-box" bindtap="likeVideo">
+            <image src="{{videoInfoCopy.isLike ? '/static/heart_colored.png' : '/static/heart.png'}}" mode=""
+                class="icon" />
+            <view class="icon-name">{{filters.numFilter(videoInfoCopy.userRead.likeAmount)}}</view>
+        </view>
+    </view>
+    <view class="toReading">
+        <image src="/static/reading.png" class="reading" mode="" />
+        <view class="reading-text">挑战PK</view>
     </view>
 </view>

components/videoPreview/index.wxss

@@ -3,6 +3,7 @@
   background-color: white;
   border-radius: 32rpx;
   box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
+  padding-bottom: 20rpx;
 }
 .work .workHead {
   display: flex;
@@ -114,27 +115,43 @@
   width: 100%;
   height: 422rpx;
 }
-.work .workFooter .mange {
+.work .workFooter {
   margin-top: 15rpx;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14rpx 20rpx 30rpx;
 }
-.work .workFooter .mange .mangeL {
-  display: flex;
-  align-items: center;
-}
-.work .workFooter .mange .mangeL .mangeL-box {
+.work .workFooter .mangeL-box {
   display: flex;
   align-items: center;
   margin-right: 30rpx;
 }
-.work .workFooter .mange .mangeL .mangeL-box .icon {
+.work .workFooter .mangeL-box .icon {
   width: 44rpx;
   height: 44rpx;
 }
-.work .workFooter .mange .mangeL .mangeL-box .icon-name {
-  margin-left: 10rpx;
+.work .workFooter .mangeL-box .icon-name {
+  margin-left: 8rpx;
   font-size: 28rpx;
 }
+.work .toReading {
+  width: 166rpx;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12rpx 32rpx;
+  border-radius: 50rpx;
+  background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
+  box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
+}
+.work .toReading .reading {
+  width: 24rpx;
+  height: 32rpx;
+}
+.work .toReading .reading-text {
+  color: white;
+  font-size: 30rpx;
+  margin-left: 12rpx;
+}

pages/index/index.js

@@ -1,72 +1,88 @@
 const app = getApp()
 import {
-    getHotrecommendList
+  getHotrecommendList
 } from "~/api/works"
 import reachBottom from '~/mixins/reachBottom'
 import {
-    createStoreBindings
+  createStoreBindings
 } from 'mobx-miniprogram-bindings'
 import {
-    store
+  store
 } from '~/store/index'
 Page({
-    behaviors: [reachBottom],
-    /**
-     * 页面的初始数据
-     */
-    data: {
-        background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
-        currentType: '1'
-    },
-    /**
-     * 生命周期函数--监听页面加载
-     */
-    onShow() {
-        if (typeof this.getTabBar === 'function') {
-            this.getTabBar().setData({
-                selected: 1
-            })
-        }
-        getApp().callBack = (res) => {
-            this.storeBindings = createStoreBindings(this, {
-                store,
-                fields: {
-                    userInfo: 'userInfo'
-                },
-            })
-            this.storeBindings.updateStoreBindings()
-            this.loadMore()
-        }
-    },
-    onUnload() {
-        this.storeBindings.destroyStoreBindings()
-    },
-    loadMore() {
-        console.log(this.data.currentType, 'zzz');
-        if (this.data.currentType == '1') {
-            this.getData(getHotrecommendList, {
-                grade: this.data.userInfo.grade
-            })
-        } else if (this.data.currentType == '2') {
-            this.getData(getHotrecommendList, {
-                grade: 'PRESCHOOL'
-            })
-        }
+  behaviors: [reachBottom],
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    navBarHeight: app.globalData.navBarHeight,
+    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
+    currentType: '1',
+    // 控制一级分类是否固定
+    isFixed: false
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onShow() {
+    if (typeof this.getTabBar === 'function') {
+      this.getTabBar().setData({
+        selected: 1
+      })
+    }
+    getApp().callBack = (res) => {
+      this.storeBindings = createStoreBindings(this, {
+        store,
+        fields: {
+          userInfo: 'userInfo'
+        },
+      })
+      this.storeBindings.updateStoreBindings()
+      this.loadMore()
+    }
+  },
+  onUnload() {
+    this.storeBindings.destroyStoreBindings()
+  },
+  loadMore() {
+    if (this.data.currentType == '1') {
+      this.getData(getHotrecommendList, {
+        grade: this.data.userInfo.grade
+      })
+    } else if (this.data.currentType == '2') {
+      this.getData(getHotrecommendList, {
+        grade: 'PRESCHOOL'
+      })
+    }
 
-    },
-    onReachBottom() {
-        console.log('触底');
-        this.loadMore()
-    },
-    selectType({
-        target
-    }) {
-        if (target.dataset.type) {
-            this.setData({
-                currentType: target.dataset.type
-            })
-            this.resetData()
-        }
-    },
+  },
+  /**
+   * 监听页面滚动事件
+   */
+  onPageScroll(e) {
+    if (e.scrollTop >= 103 && !this.data.isFixed) {
+      this.setData({
+        isFixed: true
+      })
+    } else if (e.scrollTop < 103 && this.data.isFixed) {
+      this.setData({
+        isFixed: false
+      })
+    }
+  },
+
+  onReachBottom() {
+    this.loadMore()
+  },
+  selectType({
+    target
+  }) {
+    if (target.dataset.type) {
+      this.setData({
+        currentType: target.dataset.type
+      })
+      this.resetData()
+    }
+  },
 
 })

pages/index/index.json

@@ -1,8 +1,10 @@
 {
-    "usingComponents": {
-        "rewardedVideo": "/components/rewardedVideo/index",
-        "navigationBar": "/components/navigationBar/index",
-        "worksList": "/components/worksList/index"
-    },
-    "navigationStyle": "custom"
+  "usingComponents": {
+    "rewardedVideo": "/components/rewardedVideo/index",
+    "navigationBar": "/components/navigationBar/index",
+    "worksList": "/components/worksList/index"
+  },
+  "navigationStyle": "custom",
+  "enablePullDownRefresh": false
+
 }

pages/index/index.less

@@ -1,116 +1,110 @@
 .recommend {
-    .header {
-        position: relative;
-
-        .headerBg {
-            position: absolute;
-            z-index: -2;
-            width: 100%;
-            height: 100%;
-            background-color: white;
-        }
-
-        .swiper {
-            margin: 0 auto;
-            width: 710rpx;
-            height: 216rpx;
-            border-radius: 20rpx;
-            overflow: hidden;
-            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
-
-            .swiper-item {
-                width: 100%;
-                height: 100%;
-                border-radius: 20rpx;
-                overflow: hidden;
-            }
-
-        }
+  .header {
+    position: relative;
+
+    .headerBg {
+      position: absolute;
+      z-index: -2;
+      width: 100%;
+      height: 100%;
+      background-color: white;
     }
 
-    .firstClassify {
-        padding-top: 34rpx;
+    .swiper {
+      margin: 0 auto;
+      width: 710rpx;
+      height: 216rpx;
+      border-radius: 20rpx;
+      overflow: hidden;
+      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+
+      .swiper-item {
         width: 100%;
-        white-space: nowrap;
-        background-color: white;
-
-        .firstBox {
-            text-align: center;
-            display: inline-block;
-            width: 98rpx;
-            padding: 0rpx 20rpx;
-
-            .icon {
-                width: 60rpx;
-                height: 58rpx;
-            }
-
-            .name {
-                margin-top: 6rpx;
-                font-weight: bold;
-                font-size: 24rpx;
-            }
-        }
-    }
+        height: 100%;
+        border-radius: 20rpx;
+        overflow: hidden;
+      }
 
-    .demo-text-1 {
-        background-color: rebeccapurple
     }
+  }
 
-    .demo-text-2 {
-        background-color: rgb(100, 153, 51)
-    }
+  .scrollBox {
+    width: 100%;
 
-    .demo-text-3 {
-        background-color: rgb(228, 119, 46)
-    }
+    .firstClassify {
+      padding: 24rpx 0rpx 20rpx;
+      width: 100%;
+      white-space: nowrap;
+      background-color: white;
 
-    .search {
-        position: relative;
-        background-color: white;
-        padding: 30rpx 20rpx 22rpx;
-        border-bottom-left-radius: 30rpx;
-        border-bottom-right-radius: 30rpx;
-
-        .searchImg {
-            position: absolute;
-            top: 42rpx;
-            left: 42rpx;
-            width: 24rpx;
-            height: 24rpx;
+
+      .firstBox {
+        text-align: center;
+        display: inline-block;
+        width: 98rpx;
+        padding: 0rpx 20rpx;
+
+        .icon {
+          width: 60rpx;
+          height: 58rpx;
         }
 
-        .input {
-            width: 100%;
-            height: 50rpx;
-            border-radius: 50rpx;
-            background-color: #F2F6FC;
-            box-sizing: border-box;
+        .name {
+          margin-top: 6rpx;
+          font-weight: bold;
+          font-size: 24rpx;
         }
+      }
+    }
+  }
+
+  .demo-text-1 {
+    background-color: rebeccapurple
+  }
+
+  .demo-text-2 {
+    background-color: rgb(100, 153, 51)
+  }
+
+  .demo-text-3 {
+    background-color: rgb(228, 119, 46)
+  }
+
+
+  .selectType {
+    padding: 30rpx 15rpx 30rpx 26rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .type {
+      padding: 14rpx 0rpx;
+      width: 200rpx;
+      box-sizing: border-box;
+      text-align: center;
+      border: 1rpx solid #9f9f9fa4;
+      border-radius: 50rpx;
+      color: #1A1A1A;
+      font-size: 24rpx;
     }
 
-    .selectType {
-        padding: 30rpx;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        .type {
-            padding: 14rpx 0rpx;
-            width: 200rpx;
-            box-sizing: border-box;
-            text-align: center;
-            border: 1rpx solid #9f9f9fa4;
-            border-radius: 50rpx;
-            color: #1A1A1A;
-            font-size: 24rpx;
-        }
+    .currentType {
+      border: none;
+      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+      background-color: white;
+      font-weight: bold;
+    }
 
-        .currentType {
-            border: none;
-            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
-            background-color: white;
-            font-weight: bold;
-        }
+    .search {
+      padding: 8rpx 20rpx;
+      text-align: center;
+      border: 1rpx solid #9f9f9fa4;
+      border-radius: 50rpx;
+
+      .searchImg {
+        width: 26rpx;
+        height: 26rpx;
+      }
     }
+  }
 }

pages/index/index.wxml

@@ -1,35 +1,37 @@
 <navigationBar></navigationBar>
 <view class="recommend">
-    <!-- 头部及轮播图 -->
-    <view class="header">
-        <view class="headerBg"></view>
-        <swiper class="swiper" autoplay circular indicator-dots indicator-active-color="#fff"
-            indicator-color='#ecececa1'>
-            <block wx:for="{{background}}" wx:key="*this">
-                <swiper-item>
-                    <view class="swiper-item {{item}}"></view>
-                </swiper-item>
-            </block>
-        </swiper>
-    </view>
+  <!-- 头部及轮播图 -->
+  <view class="header">
+    <view class="headerBg"></view>
+    <swiper class="swiper" autoplay circular indicator-dots indicator-active-color="#fff" indicator-color='#ecececa1'>
+      <block wx:for="{{background}}" wx:key="*this">
+        <swiper-item>
+          <view class="swiper-item {{item}}"></view>
+        </swiper-item>
+      </block>
+    </swiper>
+  </view>
+  <!-- 滚动定位 -->
+  <view class="scrollBox {{isFixed?'isFixed':''}}" style="top:{{navBarHeight}}px;">
     <!-- 一级分类区域 -->
     <scroll-view class="firstClassify" scroll-x="true">
-        <view class="firstBox" wx:for="{{10}}" wx:key="index">
-            <image class="icon" src="/static/header.png" mode="" />
-            <view class="name">书香美文</view>
-        </view>
+      <view class="firstBox" wx:for="{{10}}" wx:key="index">
+        <image class="icon" src="/static/header.png" mode="" />
+        <view class="name">书香美文</view>
+      </view>
     </scroll-view>
-    <!-- 搜索框 -->
-    <view class="search">
-        <image src="/static/search.png" class="searchImg" />
-        <view class="input" />
-    </view>
     <!-- 展示类型选择 -->
-    <view class="selectType" bindtap="selectType">
-        <view class="type {{currentType=='1'?'currentType':''}}" data-type='1'>优秀作品展播</view>
-        <view class="type {{currentType=='2'?'currentType':''}}" data-type='2'>官方推荐</view>
-        <view class="type {{currentType=='3'?'currentType':''}}" data-type='3'>官方活动</view>
+    <view class="selectType {{isFixed?'isFixed2':''}}" bindtap="selectType">
+      <view class="type {{currentType=='1'?'currentType':''}}" data-type='1'>优秀作品展播</view>
+      <view class="type {{currentType=='2'?'currentType':''}}" data-type='2'>官方推荐</view>
+      <view class="type {{currentType=='3'?'currentType':''}}" data-type='3'>官方活动</view>
+      <view class="search">
+        <image src="/static/search.png" class="searchImg" />
+      </view>
     </view>
-    <!-- 优秀作品展播及官方推荐列表组件 -->
-    <worksList id="worksList" worksList="{{list}}" />
+  </view>
+  <!-- 当一级分类固定定位时占位用的元素 -->
+  <view class="{{isFixed?'brace':''}}" />
+  <!-- 优秀作品展播及官方推荐列表组件 -->
+  <worksList id="worksList" worksList="{{list}}" />
 </view>

pages/index/index.wxss

@@ -22,23 +22,26 @@
   border-radius: 20rpx;
   overflow: hidden;
 }
-.recommend .firstClassify {
-  padding-top: 34rpx;
+.recommend .scrollBox {
+  width: 100%;
+}
+.recommend .scrollBox .firstClassify {
+  padding: 24rpx 0rpx 20rpx;
   width: 100%;
   white-space: nowrap;
   background-color: white;
 }
-.recommend .firstClassify .firstBox {
+.recommend .scrollBox .firstClassify .firstBox {
   text-align: center;
   display: inline-block;
   width: 98rpx;
   padding: 0rpx 20rpx;
 }
-.recommend .firstClassify .firstBox .icon {
+.recommend .scrollBox .firstClassify .firstBox .icon {
   width: 60rpx;
   height: 58rpx;
 }
-.recommend .firstClassify .firstBox .name {
+.recommend .scrollBox .firstClassify .firstBox .name {
   margin-top: 6rpx;
   font-weight: bold;
   font-size: 24rpx;
@@ -52,29 +55,8 @@
 .recommend .demo-text-3 {
   background-color: #e4772e;
 }
-.recommend .search {
-  position: relative;
-  background-color: white;
-  padding: 30rpx 20rpx 22rpx;
-  border-bottom-left-radius: 30rpx;
-  border-bottom-right-radius: 30rpx;
-}
-.recommend .search .searchImg {
-  position: absolute;
-  top: 42rpx;
-  left: 42rpx;
-  width: 24rpx;
-  height: 24rpx;
-}
-.recommend .search .input {
-  width: 100%;
-  height: 50rpx;
-  border-radius: 50rpx;
-  background-color: #F2F6FC;
-  box-sizing: border-box;
-}
 .recommend .selectType {
-  padding: 30rpx;
+  padding: 30rpx 15rpx 30rpx 26rpx;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -95,3 +77,13 @@
   background-color: white;
   font-weight: bold;
 }
+.recommend .selectType .search {
+  padding: 8rpx 20rpx;
+  text-align: center;
+  border: 1rpx solid #9f9f9fa4;
+  border-radius: 50rpx;
+}
+.recommend .selectType .search .searchImg {
+  width: 26rpx;
+  height: 26rpx;
+}