微信小程序模仿高德地图向上拖动展开向下拖动收起效果（包含判断向哪个方向滑动）

默认效果（收起状态）

 展开效果（将整个地图覆盖了）

 实现思路：我这里用的方法是根据滑动控制view元素的高度

 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;}