The WeChat applet imitates the effect of dragging up to expand and dragging down to collapse (including judging which direction to slide)

Default effect (collapsed state)

 

 Expand effect (covers the entire map)

 Implementation idea: The method I use here is to control the height of the view element according to the sliding

 WXML:

<!-- 地图 -->
<map longitude="108.3256" latitude="32.5698" scale="8" style="width:100%;height:100%;"/>

<!-- 悬浮的地点列表 -->
<view class="pop" style="height:{
    
    {height}}vh;"
  bind:touchstart="touchStart" 
  bind:touchend="touchEnd" 
  bind:touchcancel="touchCancel"
  >
  <view class="item-box">
    <block wx:for="{
    
    {15}}" wx:key="item">
      <view class="item">地点{
    
    {index+1}}</view>
    </block>
  </view>

</view>

JS 

// pages/watch/touch.js
var minOffset = 30;//最小偏移量，低于这个值不响应滑动处理
var minTime = 60;// 最小时间，单位：毫秒，低于这个值不响应滑动处理
var startX = 0;//开始时的X坐标
var startY = 0;//开始时的Y坐标
var startTime = 0;//开始时的毫秒数

Page({
  data: {
    height:'50'
  },
  /**
   * 触摸开始事件，初始化startX、startY和startTime
   */
  touchStart: function (e) {
    console.log('touchStart', e)
    //console.log('向下滑动',e.changedTouches[0].pageX)
    startX = e.touches[0].pageX; // 获取触摸时的x坐标  
    startY = e.touches[0].pageY; // 获取触摸时的x坐标
    startTime = new Date().getTime();//获取毫秒数
  },
/**
   * 触摸取消事件 （手指触摸动作被打断，如来电提醒，弹窗），要将startX、startY和startTime重置
   */
  touchCancel: function (e) {
    startX = 0;//开始时的X坐标
    startY = 0;//开始时的Y坐标
    startTime = 0;//开始时的毫秒数
  },

  /**
   * 触摸结束事件，主要的判断在这里
   */
  touchEnd: function (e) {
    console.log('touchEnd', e)
    var endX = e.changedTouches[0].pageX;
    var endY = e.changedTouches[0].pageY;
    var touchTime = new Date().getTime() - startTime;//计算滑动时间
    //开始判断
    //1.判断时间是否符合
    if (touchTime >= minTime) {
      //2.判断偏移量：分X、Y
      var xOffset = endX - startX;
      var yOffset = endY - startY;
      // console.log('xOffset', xOffset)
      // console.log('yOffset', yOffset)
      //①条件1（偏移量x或者y要大于最小偏移量）
      //②条件2（可以判断出是左右滑动还是上下滑动）
      if (Math.abs(xOffset) >= Math.abs(yOffset) && Math.abs(xOffset) >= minOffset) {
        //左右滑动
        //③条件3（判断偏移量的正负）
        if (xOffset < 0) {
          console.log('向左滑动')
        } else {
          console.log('向右滑动')
        }
      } else if (Math.abs(xOffset) < Math.abs(yOffset) && Math.abs(yOffset) >= minOffset) {
        //上下滑动
        //③条件3（判断偏移量的正负）
        if (yOffset < 0 || (e.target.offsetTop>400)) {
          console.log('向上滑动',e.target.offsetTop)
          this.setData({
            height:100
          })
        } else {
          console.log('向下滑动',e.target.offsetTop)
          this.setData({
            height:50
          })
        }
      }
    } else {
      console.log('滑动时间过短', touchTime)
    }
  },
})

CSS

page{height:100%;overflow: hidden;}
.pop{left:0;bottom:0;width:100%;position:absolute;background:rgba(255, 255, 255);transition:.3s all;}
.item-box{height:100%;overflow-y:auto;}
.item{height:160rpx;line-height:160rpx;border-bottom:1px solid #eee;}