微信小程序怎么实现上滑自动回收某个元素

需求： 下拉时展示地图(占半个屏幕的大小),当上滑到某个程度时地图自动回收,恢复到原来没有地图的状态.

解决办法:

1. 将所有元素放入scroll-view中,通过滚动事件监听何时回收
2. 通过给父节点注册 touchend 和 touchstart事件 判断用户手势,从而实现上滑回收的功能
3. 通过 onPageScroll事件

优缺点:

方法1: 有个缺陷: 使用了 scroll-view 容器 当内容比较多时在安卓机部分机型上比较卡顿,解决卡顿可以使用官方的长列表组件

方法2: 比较灵活, 可以监听缩放/双击/长按/滑动/拖拽, 便于日后扩展. 缺点是上手难度比较大

方法3: 实际测试发现此事件仅仅可以监听到下拉,对上滑无感知,满足不了需求,暂时不做进一步的考虑

第二种方法的具体代码

  scrollTouchstart: function(e) {
    this.data.startPageY = e.touches[0].pageY;
  },
  scrollTouchmove: function(e) {
    let movePageY = e.touches[0].pageY;
    let startPageY = this.data.startPageY;
    this.data.endPageY = movePageY;
    if (movePageY - startPageY < 100 && movePageY - startPageY > -100) {
      this.data.marginTop = movePageY - startPageY;
    }
  },
  scrollTouchend: function(e) {
    const _this = this;
    // helper.throttle(() => {
    let endPageY = _this.data.endPageY;
    let startPageY = _this.data.startPageY;
    // let marginTop = this.data.marginTop;
    console.log(endPageY);
    console.log(startPageY);
    console.log(endPageY - startPageY);
    // onPullDownRefreshIng 控制页面下拉刷新的参数
    if (endPageY - startPageY < 0 && !this.data.onPullDownRefreshIng) {
      _this.setData(
        {
          downRefresh: false
        },
        function() {
          wx.pageScrollTo({
            scrollTop: 0,
            duration: 500
          });
        }
      );
      // }, 500);
    }
  },
  
    /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
    const _this = this;
    if (this.data.mapShow) {
      this.setData({
        downRefresh: true
      });
      this.data.onPullDownRefreshIng = true;
    }
    wx.stopPullDownRefresh({
      success(res) {
        setTimeout(() => {
          _this.data.onPullDownRefreshIng = false;
        }, 1000);
      }
    });
  },