微信小程式實現頂部固定 底部分頁捲動效果

<!--pages/demo/demo.wxml-->
<view class="wrap">
  <view class="top-box" style="{{boxStyle}}">
    <view class="top-box1" style="{{box1Style}}">頂部box1</view>
    <!-- <view class="top-box2"></view> -->
    <scroll-view class="top-box2" scroll-into-view="{{scrollId}}" scroll-x="true"scroll-with-animation="true" >
      <block wx:for="{{cates}}" wx:key="index">
        <view class="{{item.id === currentId?'cate-item-act cate-item':'cate-item'}}" data-id="{{item.id}}" id="good{{item.id}}" bindtap="cateChange">{{item.name}}</view>
      </block>
    </scroll-view>
  </view>
  <scroll-view scroll-y="true" class="scroll-con" style="{{scrollViewStyle}}" bindscroll="goodsViewScroll" bindscrolltoupper="goodsViewScrollTop">
    <view class="scroll-con-item" wx:for="{{cates}}" wx:key="index">{{item.name}}</view>
  </scroll-view>
</view>

Page({
  data: {
    cates:[
      {id:null,name:'全部'},
      {id:1,name:'分類1'},
      {id:2,name:'分類2'},
      {id:3,name:'分類3'},
      {id:4,name:'分類4'},
      {id:5,name:'分類5'},
      {id:6,name:'分類6'},
      {id:7,name:'分類7'},
      {id:8,name:'分類8'}
    ],
    currentId:null,
    serviceList:[
      {id:1,name:'1'},
      {id:2,name:'2'},
      {id:3,name:'3'},
      {id:4,name:'4'},
      {id:5,name:'5'},
      {id:6,name:'6'},
      {id:7,name:'7'},
      {id:8,name:'8'}
    ],
    scrollId:null,//滑動id,切換tab效果
    animationStyle:'',
    isNeedFixed:false
  },
  /**
   * 生命週期函數--監聽頁面載入
   */
  onLoad(options) {
    let that = this;
    wx.getSystemInfo({
      success: function (res, rect) {
        that.setData({
          // 商品scroll高度 = 可使用視窗 - （頂部box的高度+margin20 -20(底部留白)）
          scrollViewHeight: parseInt(res.windowHeight - 220 -20),
          scrollViewStyle:`height:${parseInt(res.windowHeight - 220-20)}px`
        })
      }
    })
  },
  cateChange(e){
    let currentId = e.currentTarget.dataset.id;
    let scrollId = e.currentTarget.id;
    this.setData({
      currentId,
      scrollId
    })
  },
  // 加this.data.isNeedFixed條件防止頻繁的setdata
  // 1 隱藏box1,box2會自動吸頂 box2置頂
  // 2 設定scroll-view高度+120, 設定頂部box高度為box2高度
  goodsViewScroll(e){
    console.log(e.detail.scrollTop, this.data.isNeedFixed)
    if(e.detail.scrollTop >= 120 ){
      console.log('可以動畫調整位置了')
      this.setData({
        isNeedFixed:true,
        box1Style:`height:0px;`,
        boxStyle:`height:80px;`,
        scrollViewStyle: `height:${this.data.scrollViewHeight + 120}px`,  
      }
    }
    // if(e.detail.scrollTop < 120 ) {
    //   console.log('需要保持原樣')
    //   this.setData({
    //     isNeedFixed:false,
    //     box1Style:`height:110px;`,
    //     boxStyle:`height:200px;`,
    //     scrollViewStyle: `height:${this.data.scrollViewHeight}px`,
    //   },()=>{
    //     wx.pageScrollTo({
    //       scrollTop: 0,
    //     })
    //   })
    // }
  },

  goodsViewScrollTop(e){
       this.setData({
        isNeedFixed:false,
        box1Style:`height:110px;`,
        boxStyle:`height:200px;`,
        scrollViewStyle: `height:${this.data.scrollViewHeight}px`,
      })
  }
})

.wrap {
  height: 100vh;
}
.top-box {
  height: 200px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #d1d1d1;
  transition:height 0.2s;
    -webkit-transition:height 0.2s; /* Safari */
}
.top-box1 {
  height: 110px;
  width: 100%;
  margin-bottom: 10px;
  background-color: #3293FF;
  overflow: hidden;
  transition:height 0.2s;
  -webkit-transition:height 0.2s; /* Safari */
}
.top-box2 {
  height: 80px;
  width: 100%;
  background-color: #ffbe32;
  white-space: nowrap;
  padding: 50rpx 0;
  box-sizing: border-box;
}
.top-box2 .cate-item {
  display: inline-block;
  padding: 10rpx 20rpx;
  font-size: 26rpx;
  margin-right: 20rpx;
  color: #767A84;
}
.top-box2 .cate-item:last-child{
  margin-right: 0rpx;
}
.top-box2 .cate-item-act {
  background: #3293FF;
  color: #fff;
  border-radius: 48rpx;
}
.scroll-con {
  padding: 0 10px;
  margin-top: 20px;
  box-sizing: border-box;
  background-color: #fff;
}
.scroll-con-item {
  height: 100px;
  width: 100%;
  background-color: salmon;
  margin-bottom: 10px;
}
.ani-btn {
  display: inline-block;
  padding: 20rpx;
  margin: 10rpx;
  border: 1px solid #d1d1d1;
}
@keyframes move{ from{transform: translateY( 30px)} to {transform: translateY( 0px)}}