微信小程序开发-实现拖动动态弹窗

因为某个需求，需要开发一个高度能随着上下拖动改变的弹窗，实现思路如下：

整体上基于Vant的popup弹出组件+touchmove事件，动态计算拖动的距离，从而调整弹窗的高度，布局内部使用slot插槽实现内容自定义

touchmove：

   handleDrag: throttle(function (arg) {
      // 距离页面可显示区域（屏幕除去导航条）左上角距离
      const clientY = arg[0].touches[0].clientY
      const {
        startHeight,
        height,
        maxHeight
      } = this.data
      // 最小高度
      const minHeight = maxHeight * 0.4
      // 计算偏移量
      const offsetY = clientY - startHeight
      if (offsetY < 0) { // 上移
        // 超出最大高度后不再增加弹窗高度
        if (height > maxHeight) return
        this.setData({
          height: height + Math.abs(offsetY)
        })
      } else { // 下移
        // 小于最小高度后不再减小弹窗高度
        if (height < minHeight) return
        this.setData({
          height: height - Math.abs(offsetY)
        })
      }
      // 每次更新弹窗高度后，同时记录下一次更新的起始拖动高度
      this.data.startHeight = clientY
    }, 10),

以上代码只是核心的移动事件的处理，如果需要调整弹窗的弹出位置等可以参考官方的文档自行封装