• uni-app小程序滑动事件


    <view class="relative" @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend">
    </view>
    
    data() {
    		return {
    			flag: 0,
    			text: '',
    			lastX: 0,
    			lastY: 0
    }
    }
    
    methods: {
    		handletouchmove: function(event) {
    			// console.log(event)
    			if (this.flag !== 0) {
    				return;
    			}
    			let currentX = event.touches[0].pageX;
    			let currentY = event.touches[0].pageY;
    			let tx = currentX - this.lastX;
    			let ty = currentY - this.lastY;
    			let text = '';
    			this.mindex = -1;
    			//左右方向滑动
    			if (Math.abs(tx) > Math.abs(ty)) {
    				if (tx < 0) {
    					text = '向左滑动';
    					this.flag = 1;
    				//	this.getList();  //调用列表的方法
    				} else if (tx > 0) {
    					text = '向右滑动';
    					this.flag = 2;
    				}
    			}
    			//上下方向滑动
    			else {
    				if (ty < 0) {
    					text = '向上滑动';
    					this.flag = 3;
    				//	this.getList();  //调用列表的方法
    				} else if (ty > 0) {
    					text = '向下滑动';
    					this.flag = 4;
    				}
    			}
    
    			//将当前坐标进行保存以进行下一次计算
    			this.lastX = currentX;
    			this.lastY = currentY;
    			this.text = text;
    		},
    		handletouchstart: function(event) {
    			// console.log(event)
    			this.lastX = event.touches[0].pageX;
    			this.lastY = event.touches[0].pageY;
    		},
    		handletouchend: function(event) {
    			this.flag = 0;
    			this.text = '没有滑动';
    		},
    }
    
  • 相关阅读:
    Java并发编程笔记——技术点汇总
    Hello Blog
    shell变量
    认识bash这个shell
    使用myeclipse创建带注解的model实体类
    python List,切片的用法
    ignite从0到1的学习过程记录-第一篇:安装和体验
    安卓Service完全解析(中)
    安卓Service完全解析(上)
    JAVA之数组
  • 原文地址:https://www.cnblogs.com/chengmingxiaowu/p/10812008.html
Copyright © 2020-2023  润新知