uniapp监测用户左滑右滑上滑下滑事件

定义组件

• 定义的该组件名称 swiper-direct-com(自己可以随便命名)

• <template>
  	<view class="wrapper" @touchstart="fingerstart" @touchend="fingerend">
  		<slot></slot>
  	</view>
  </template>
  
  <script>
  	export default {
  		name: "swipe-direct-com",
  		data() {
  			return { // 记录开始位置
  				startData: {
  					clientX: '',
  					clientY: ''
  				},
  			};
  		},
  		props: {
  			updDistance: { // 上下滑动 超过多少距离触发 updownDistance
  				type: Number,
  				default: 100
  			},
  			lrDistance: { // 左右滑动 超过多少距离触发
  				type: Number,
  				default: 50
  			},
  			topMed: { // 上划触发 方法名
  				type: String,
  				default: '',
  			},
  			bottomMed: { // 下滑触发 方法名
  				type: String,
  				default: '',
  			},
  			leftMed: { // 左滑触发 方法名
  				type: String,
  				default: '',
  			},
  			rightMed: { // 右滑触发 方法名
  				type: String,
  				default: '',
  			}
  		},
  		// 解析数据 
  		mounted() {
  			
  		},
  		methods: {
  			// 当按下去的时候
  			fingerstart(e) {
  				// 记录 距离可视区域左上角 左边距 和 上边距
  				this.startData.clientX = e.changedTouches[0].clientX;
  				this.startData.clientY = e.changedTouches[0].clientY;
  			},
  			// 当抬起来的时候
  			fingerend(e) { 
  				// 当前位置 减去 按下位置 计算 距离
  				const subX = e.changedTouches[0].clientX - this.startData.clientX;
  				const subY = e.changedTouches[0].clientY - this.startData.clientY;
  				if (subY > this.updDistance || subY < -this.updDistance) {
  					if (subY > this.updDistance) {
  						this.bottomscroll(subY);
  					} else if (subY < -this.updDistance) {
  						this.topscroll(subY);
  					}
  				} else {
  					if (subX > this.lrDistance) {
  						this.rightscroll(subX);
  					} else if (subX < -this.lrDistance) {
  						this.leftscroll(subX);
  					} else {
  						console.log('无效操作')
  					}
  				}
  			},
  			// 上滑触发
  			topscroll(dista) {
  				this.topMed ? this.$emit(`${this.topMed}`,dista) : null
  				console.log("触发了上滑方法!");
  			},
  			// 下滑触发
  			bottomscroll(dista) {
  				this.bottomMed ? this.$emit(`${this.bottomMed}`,dista) : null
  				console.log("触发了下滑方法!");
  			},
  			// 右滑触发
  			rightscroll(dista) {
  				this.rightMed ? this.$emit(`${this.rightMed}`,dista) : null
  				console.log("触发了右滑方法!");
  			},
  			// 左滑触发
  			leftscroll(dista) {
  				this.leftMed ? this.$emit(`${this.leftMed}`,dista) : null
  				console.log("触发了左滑方法!");
  			}
  		}
  	}
  </script>
  
  

  页面使用

• <swiper-direct-com 
  :lrDistance="5"  
  leftMed="scrollL" 
  rightMed="scrollR" 
  @scrollL="scrollL"
  @scrollR="scrollR">
  
  <!-- 内容区 -->
  
  </swiper-direct-com>
  

  import swiperDirectCom from '@/components/swiper-direct-com.vue'
  export default{
  	components:{
  		swiperDirectCom
  	},
  	data(){
  		return{
  		
  		}
  	},
  	methods:{
  		// 左滑触发方法
  		scrollL() {	
  			/*
  				业务逻辑 ....
  			*/
  		}
  		// 右滑触发方法
  		scrollR() {	
  			/*
  				业务逻辑 ....
  			*/
  		}
  	}
  }