微信小程序实现页面上滑展示不同的样式

app.js

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    this.calculateNavigationBar()

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  calculateNavigationBar() {
    let menuButtonObject = wx.getMenuButtonBoundingClientRect();
    wx.getSystemInfo({
      success: res => {
        let statusBarHeight = res.statusBarHeight,
          topHeight = menuButtonObject.top, //胶囊按钮与顶部的距离
          dotHeight = menuButtonObject.height,
          navHeight = topHeight + dotHeight,
          // navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2, //导航高度
          safeBottomHeight = res.screenHeight - res.safeArea.bottom
        this.globalData.customTopHeiht = {
          navHeight: navHeight,
          topHeight: topHeight,
          dotHeight: dotHeight,
          statusBarHeight: statusBarHeight,
          safeBottomHeight: safeBottomHeight,
        }
      },
      fail(err) {
        console.log(err)
      }
    })
  },
  globalData: {
    userInfo: null,
    customTopHeiht: {},
  }
})

实现片段

wxml

<view  class="topbg {{ isFixedTop ? 'topbg1' : '' }}" style="height: {{ customTopHeiht.navHeight + 12 }}px;">
  <view class="toptitle {{ isFixedTop ? 'toptitle1' : '' }}" style="top: {{ customTopHeiht.topHeight }}px;line-height:{{customTopHeiht.dotHeight}}px;height: {{customTopHeiht.dotHeight}}px;">
    <block wx:if="{{ isFixedTop }}">
      <input placeholder="请输入关键字"/>
    </block>
    <block wx:else>测试上滑</block>
  </view>
</view>
<view class="box" style="margin-top: {{ customTopHeiht.navHeight + 12 }}px;">
  <view class="single" wx:for="{{ num }}" wx:key="index">{{ index }}</view>
</view>

js

const app = getApp()
Page({
    data: {
        num: 20,
        isFixedTop: false
    },
    onLoad() {
        this.setData({ customTopHeiht: app.globalData.customTopHeiht })
    },
    onPageScroll: function (e) {
        if (this.data.timer) {
            clearTimeout(this.data.timer)
        }
        this.data.timer = setTimeout(() => {
            let scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度
            if (scrollTop > 300) {
                setTimeout(() => {
                    this.setData({
                        isFixedTop: true
                    })
                }, 200)
            } else  {
                this.setData({
                    isFixedTop: false
                })
            }
            clearTimeout(this.data.timer)
        }, 500)
    }
})

wxss

.box {
  padding: 30rpx;
  box-sizing: border-box;
}
.single {
  height: 300rpx;
  line-height: 300rpx;
  margin-bottom: 30rpx;
  box-shadow: 0rpx 0rpx 2rpx 2rpx #eee;
}

.single:last-child {
  margin-bottom: 0rpx;
}
.topbg {
  width: 100%;
  position: fixed;
  top: 0rpx;
  left: 0rpx;
  z-index: 100000;
  background: linear-gradient(180deg, #EEB992 0%, #EEB992 100%, transparent 100%);
}

.topbg1 {
  background: linear-gradient(180deg, #F8EFEA 0%, #FCF8F5 100%, transparent 100%);
}

.topbg .toptitle {
  width: 100%;
  color: #000000;
  font-size: 34rpx;
  font-weight: bold;
  height: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 1000;
}

.topbg .toptitle1 {
  padding-left: 30rpx;
  justify-content: flex-start;
}

.topbg input {
  width: 60%;
  line-height: 48rpx;
  height: 48rpx;
  display: block;
  font-size: 24rpx;
  padding-left: 30rpx;
  border-radius: 24rpx;
  border: 2rpx solid rgb(184, 181, 181);
}

json

{
  "usingComponents": {},
  "navigationStyle":"custom"
}