uniapp滑屏操作示例

示例代码

<view class="fztype" @touchmove="handleTouchMove" @touchstart="handleTouchStart" @touchend="handleTouchEnd" :animation="animationData"> //自定义内容区域  </view>

export default{	data(){		return{			//动画操作相关			animationData: {},			//滑动操作相关			flag: 0,//1向左滑动,2向右滑动,3向上滑动 4向下滑动			text: '',//向哪里滑动			lastX: 0,			lastY: 0,			index:0,		}	},	created() {		this.animation = uni.createAnimation()	},	methods:{		//滑动操作事件		 handleTouchMove: function(event) {			// console.log(event)			if (this.flag !== 0) {				return;			}			let currentX = event.changedTouches[0].pageX;			let currentY = event.changedTouches[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();  //调用列表的方法						this.animation.height('400rpx').step()						this.animationData = this.animation.export()				} else if (ty > 0) {					text = '向下滑动';					this.flag = 4;					//this.fztypeHeight = 40					this.animation.height('40rpx').step()					this.animationData = this.animation.export()				}			}		 			//将当前坐标进行保存以进行下一次计算			this.lastX = currentX;			this.lastY = currentY;			this.text = text;		},		handleTouchStart: function(event) {		    // console.log(event)		    this.lastX = event.changedTouches[0].pageX;		    this.lastY = event.changedTouches[0].pageY;		},		handleTouchEnd: function(event) {		    this.flag = 0;		    this.text = '没有滑动';		},		closeFztype(){ //关闭内容区域动画			this.animation.height('40rpx').step()			this.animationData = this.animation.export()		},	}}

1.animationData 动画操作非必须

2.主要用于需要滑动操作的场景，比如，自定义多状态聊天按钮，滑屏操作

3.h5下不兼容，小程序和app没问题

4.uniapp动画相比css动画较卡顿，可以用css动画代替

来源：一点it