app：监测滑动方向与距离，并触发事件，使用组件并检测滚动条位于顶部还是底部

let myTouch =
	`
		<div class="slide" ref='slide' @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="{transform: translateX}">
		  <slot></slot>
		</div>
	`;

Vue.component('my-touch', {
	template: myTouch,
	name: 'myTouch',
	data: function() {
		return {
			startX: 0, //开始触摸的位置
			endX: 0, //结束触摸的位置
			disX: 0, //移动距离
			lastX: 0, //上一次X坐标
			lastY: 0, //上一次Y坐标
			triggerDistance: 55,//滑动事件触发距离
			translateX: 'translateX(0px)'//左右滑动动画
		}
	},
	methods: {
		touchStart: function(ev) {
			ev = ev || event;
			if (ev.touches.length == 1) { //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
				this.startX = this.lastX = ev.touches[0].clientX; // 记录开始位置
				this.startY = this.lastY = ev.touches[0].clientY;
			}
		},
		touchMove: function(ev) {
			ev = ev || event;
			// let slideWidth = this.$refs.slide.offsetWidth; //$refs 减少获取dom节点的消耗
			if (ev.touches.length == 1) {
				// 实时的滑动的距离-起始位置=实时移动的位置
				// this.disX = this.lastX - this.startX;
				// 计算两次移动距离Y>X就不启动滑动动画,防止误滑
				// var disX = ev.touches[0].clientX - this.lastX
				// var disY = ev.touches[0].clientY - this.lastY
				// console.log(disX, disY);
				// if (Math.abs(disX) > Math.abs(disY)) {
				//   this.translateX = 'translateX(' + this.disX + 'px)';
				// }
				// 记录一次坐标值
				this.lastX = ev.touches[0].clientX;
				this.lastY = ev.touches[0].clientY;
			}
		},
		touchEnd: function(ev) {
			ev = ev || event;
			if (ev.changedTouches.length == 1) {
				let endX = ev.changedTouches[0].clientX;
				let endY = ev.changedTouches[0].clientY;
				this.disX = endX - this.startX;
				this.disY = endY - this.startY;
				
				// this.translateX = 'translateX(0px)';

				// 只有滑动大于额定距离才触发
				if (Math.abs(this.disX) >= this.triggerDistance || Math.abs(this.disY) >= this.triggerDistance ) {
					if (Math.abs(this.disX) > Math.abs(this.disY)) { //左右滑动
						if (this.disX < 0) {
							console.log('左滑');
							this.$emit('slide', 'left')
						} else {
							console.log('右滑');
							this.$emit('slide', 'right')
						}
					} else { //上下滑动
						if (this.disY < 0) {
							console.log('上滑');
							this.$emit('slide', 'up')
						} else {
							console.log('下滑');
							this.$emit('slide', 'down')
						}
					}
				}
			}
		}
	}
})

	slide(param){
		let me = this;
		if(param === "up"){
			// mui.toast("上滑事件");
			me.isShowSearch = false;
			me.pageListStyle = {
				"margin-top": "44px"
			}
		}
		if(param === "down"){
			// mui.toast("下滑事件");
			me.isShowSearch = true;
			me.pageListStyle = {
				"margin-top": "80px"
			}
		}
	}

	getDocumentHeight () {//兼容性写法,获取文档高度
	   const body = document.body
	   const html = document.documentElement
	   const height = Math.max(
	   body.offsetHeight,
	   body.scrollHeight,
	   html.clientHeight,
	   html.offsetHeight,
	   html.scrollHeight
	 )
	  return height
	},
	getScrollTop () {//文档滚出可视区的高度：
	  const scrollTop =(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop
	  return scrollTop
	},
	getClient() {//可视区区域对象
	  const client = {}
	  client.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
	  client.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
	    return client
	},
	slide(param) {
		let me = this;
		if (param === "up") {
			// mui.toast("上滑事件");
			me.isShowSearch = false;
			me.pageListStyle = {
				"margin-top": "44px"
			}
			
			//到达底部，下一页
			if (me.getDocumentHeight() - me.getScrollTop() <= me.getClient().height){
				//触发上拉刷新事件
				me.pageIndex++; //下一页数据
				me.jumpPage();
			}
		}
		if (param === "down") {
			//显示搜索框
			me.isShowSearch = true;
			me.pageListStyle = {
				"margin-top": "80px"
			}
			
			debugger;
			if (me.getScrollTop() == 0) { //被折叠的区域高度为0
				//触发下拉刷新事件
				me.pageIndex = 0; //第一页数据
				me.jumpPage();
			}
		}
	},