微信小程序监听屏幕上滑下滑事件

需求是在list页中带有搜索框，下滑时隐藏顶部输入框，上滑时显示输入框，提高一点点用户体验。避免想要搜索就必须上滑至顶部。。
实现：
首先输入框得固定在顶部。
wxml：class="search-box { {showSearch? '':'hide'}} bindtouchstart="handletouchstart" bindtouchmove="handletouchmove"
wxss:

.hide{
  display: none;
}
.search-box {
  position: fixed;
  top: 0;
  left: 0;
  }

js:

data: {
    startY: 0,     //滑动开始y轴位置
    lastY: 0,     //滑动开始y轴位置
    showSearch: true, //是否显示搜索框
  },
  // 监听页面滚动事件
  handletouchmove (event) {
    let currentY = event.changedTouches[0].clientY
    if (currentY <= this.data.startY) {
      this.setData({
        showSearch: false
      })
      console.log("下滑")
    } else {
      this.setData({
        showSearch: true
      })
      console.log("上滑")
    }
  },
  //滑动开始事件
  handletouchstart: function (event) {
    this.data.startY = event.changedTouches[0].clientY
  },

功能实现！

附

touch事件event包含的属性

clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触摸的DOM节点目标。

移动端浏览器触摸事件

事件名称	描述
touchStart	触摸开始，多点触控，后面的手指同样会触发
touchmove	接触点改变，滑动时
touchend	触摸结束，手指离开屏幕时
touchcancel	触摸被取消，当系统停止跟踪触摸的时候触发