El subprograma WeChat, que imita a WeChat, se despliega hacia abajo para mostrar el efecto del subprograma, muy sedoso.

1. Ver capa

Se utilizan la vista móvil (contenedor de vista móvil) del subprograma WeChat y el área móvil de la vista móvil.

Documentación del miniprograma WeChat

<!--wxml-->
<view style="position: relative;" class="page-container">
  <view>
    二楼内容
  </view>
  <movable-area class="area-style">
    <movable-view disabled="{
    
    {disabled}}" bindchange="changeMove" bindtouchend="touchend" bindtouchstart="touchstart" y="{
    
    {y}}" class="view-style br" direction="vertical">
      一楼内容
    </movable-view>
  </movable-area>
</view>

3.css

Nota: El área móvil debe ser más grande que el contenedor de vista móvil, de lo contrario no podrá moverse.
Aquí configuré .area-style en 200vh. View-style se configuró en 100vh.
Aquí hay un detalle:
cuando el área móvil llega al fondo, continúa deslizándose hacia abajo para mover el área. Rebotará hacia la parte superior,
solución:
1. Configuración: altura del área móvil = altura del área móvil + altura del retorno móvil,
2. Control a través de js: deslizándose hacia abajo en el punto más bajo no es válido

/* wxss */
.page-container{
    
    
  height: 100vh;
  overflow: hidden;
  background-color: #aaa;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  padding-top: 20px;
}
.area-style {
    
    
  height: 200vh;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.view-style {
    
    
  width: 100%;
  height: 100vh;
  background-color: #fafafa;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  padding-top: 20px;
}

5.js

Controle el valor y a través de js y luego realice el efecto de apertura / cierre de la animación deslizante y deslizante.

Nota: Si la vista de desplazamiento se usa en el primer o segundo piso, es necesario controlar dinámicamente si la vista de desplazamiento puede deslizarse cuando y=minY o y=maxY.

// ts
Page({
    
    

  /**
   * 页面的初始数据
   */
  data: {
    
    
    y: 0, // 一楼（可滑动块）距离顶部的距离
    minY: 0, // 一楼（可滑动块）距离顶部的最小距离
    maxY: 0,// 一楼（可滑动块）距离顶部的最大距离
    endY: 0,// 滑动结束是y的值
    startY: 0, // 滑动开始时y的值（要么等于minY,要么等于maxY）
    threshold: 100, // 滑动阀值（指 滑动超过此值一段距离，才会打开或者关闭，否则弹回原来的状态）
    disabled: false, // 是否禁止滑动
  },
  // 滑动过程中，把每次滑动的当前值，赋值给endY
  changeMove(e: any) {
    
    
    this.setData({
    
    
      endY: e.detail.y
    })
  },
  // 滑动结束
  touchend() {
    
    
    const {
    
     startY, endY, maxY, minY, threshold } = this.data
    let value;
    // 判断向下滑动
    if (endY > startY && endY - startY > threshold) {
    
    
      // 触发下滑，页面打开二楼
      value = maxY
      // 触发下滑成功，设置震动反馈
      wx.vibrateShort({
    
     type: 'heavy' })
    } else {
    
    
      // 未触发下滑，页面回弹到一楼
      value = minY
    }
    // 判断上划
    if (startY > endY && startY - endY < threshold) {
    
    
      // 触发上滑，页面回到一楼
      value = maxY
    }
    this.setData({
    
    
      y: value
    })
  },
  // 滑动开始
  touchstart() {
    
    
    this.setData({
    
    
      startY: this.data.y
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad() {
    
    
    // 获取屏幕高度
    const res = await wx.getSystemInfo()
    // 设置最大顶部距离（-200，目的是让一楼漏出头，方便上划，或者点击）
    this.setData({
    
    
      maxY: res.screenHeight - 200
    })
  },
})

Optimización continua, bienvenidos a discutir juntos.