微信小程序仿高德地图首页面板上下滑动效果

首先是wxml文件：

需要注意的是 父元素事件一定要是捕获模式！！！！ 

然后是js部分

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

Page({
  data:{
    markers:[
        {
          id:1,
          longitude:120.22096505715056,
          latitude:30.257772854411684,
          width:48,
          height:48,
          iconPath:'../../static/index/location_fill.png'
        }
    ],
    height:50
  },
  onLoad(e){
    const res = wx.getSystemInfoSync()
    this.setData({
      panelTop:parseInt(res.windowHeight / 3) * 2,
      windowHeight:res.windowHeight
    })
  },
  tapMap(e){
    let h = parseInt(this.data.windowHeight / 3)*2
    this.setData({
      panelTop:h
    })
  },
  touchStart: function (e) {
    startX = e.touches[0].pageX; // 获取触摸时的x坐标  
    startY = e.touches[0].pageY; // 获取触摸时的x坐标
    startTime = new Date().getTime();//获取毫秒数
  },
  touchCancel: function (e) {
    startX = 0;//开始时的X坐标
    startY = 0;//开始时的Y坐标
    startTime = 0;//开始时的毫秒数
  },
  touchEnd: function (e) {
    var endX = e.changedTouches[0].pageX;
    var endY = e.changedTouches[0].pageY;
    var touchTime = new Date().getTime() - startTime;
    if (touchTime >= minTime) {
      var xOffset = endX - startX;
      var yOffset = endY - startY;
      if (Math.abs(xOffset) < Math.abs(yOffset) && Math.abs(yOffset) >= minOffset) {
        if (yOffset < 0 || (e.target.offsetTop>400)) {
          this.setData({
            height:80
          })
        } else {
          this.setData({
            height:50
          })
        }
      }
    }
  },
  lookHospitalDetail(){
    wx.navigateTo({
      url: '/pages/hospitalInfo/hospitalInfo',
    })
  }
})

最后附上样式：

.map{
  width: 100vw;
  transition: all .5s ease;
}
.panel{
  width: 100vw;
  background: white;
  z-index: 99999;
  box-shadow: 0 0 16rpx #b8b8b8, none, none, none;
  transition: all .5s ease;
  overflow: hidden; 
  left:0;
  bottom:0;
  position:absolute;
}
.search{
  box-shadow: 0 0 16rpx #b8b8b8;
  height: 88rpx;
  align-items: center;
  padding: 32rpx;
  border-radius: 50rpx;
}
.search input{
  margin-left: 16rpx;
  width: 100%;
}
.hospitals{
  padding: 64rpx 32rpx 160rpx 32rpx;
  margin-bottom: 64rpx;
  height: 100%;
  width: 100vw;
}
.hospitals .hospital{
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  height: 218rpx;
  margin-bottom: 64rpx;
  border-radius: 25rpx;
  border: 1rpx solid #b8b8b8;
}
.hospitals .hospital:last-child{
  margin-bottom: 0;
}
.hospital .info{
  width: 70%;
}
.hospital .info,.hospital .lookDetail{
  height: 100%;
}
.name{
  font-size: 36rpx;
  font-weight: bolder;
}
.type{
  color: #D43030;
}
.lookDetail{
  color: #2A82E4;
}