vue H5中使用kim-vue-touch监听上滑，点击下滑事件

// 下载插件
cnpm install kim-vue-touch --save
// main.js文件中引入
import vueTouch from 'kim-vue-touch'
Vue.use(vueTouch)
// 页面代码
<template>
  <div id="workList" v-swipeup="(e) => upSlide('upSlide', e)">  <!-- 为整个页面绑定上滑事件 -->
    <div class="workColumnTop" v-tap="(e) => downSlide('downSlide', e)">  <!-- 为顶部背景图绑定点击事件实现下滑效果 -->
      <img
        class="goBack"
        :style="{ 'margin-top': (immersed * 2) / 100 + 'rem' }"
        src="@/assets/images/workListGoBack.png"
        @click="commonJs.iback()"
      />
      <img class="workColumnBg" :src="workColumnData.detailUrl" />
      <div class="action">
        <img src="@/assets/images/upSlide.png" />
      </div>
    </div>
    <div ref="workList" class="workListContain">  <!-- 列表模块（需上滑和下滑） -->
      <div class="listContain" ref="listContain">  <!-- 列表数据 -->
        ...
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .workListContain {
    position: absolute;
    top: 7.5rem;
    width: 100%;
    height: calc(100vh - 7.5rem);
    background: #fff;
    border-radius: 0.7rem 0.7rem 0 0;
    
    .listContain {
      height: calc(100% - 0.6rem);
      overflow: hidden;
    }
  }
</style>
// 上滑
upSlide(e) {
  console.log(e, "触发上滑");
  this.$refs.workList.style.top = "3.5rem";  // 定位位置
  this.$refs.listContain.style.overflow = "auto"; // 列表一开始滚动条隐藏，上滑后出现滚动条再滚动
  this.$refs.workList.style.height = "calc(100vh - 3.5rem)";  // 列表高度
  this.$refs.workList.style.transition = "all 0.8s";  // 过渡效果
  if (this.listData && this.listData.length >= 10) { // 与vant的列表组件一起使用，导致下拉加载失效，不调用onLoad方法，这里改为上滑调用
    this.onLoad();
  }
},
// 点击背景图下滑到原位置
downSlide(e){
  console.log(e, "点击下滑----");
  this.$refs.workList.style.top = "7.5rem";
  this.$refs.listContain.style.overflow = "hidden";
  this.$refs.workList.style.height = "calc(100vh - 7.5rem)";
}