uniapp H5 touchstart执行完成并返回成功再执行touchend 失败则不执行touchend

uniapp H5 touchstart执行完成并返回成功再执行touchend 失败则不执行touchend

  1. 直接上代码
javascript 复制代码
<tmmplate>
    // 只绑定 touchstart 事件
	<view class="mp_yun_item">
		<view class="mp-ptz-btn mp-yun-top" @touchstart="yunControl">
		</view>
		<view class="mp-ptz-btn mp-yun-right" @touchstart="yunControl">
		</view>
		<view class="mp-ptz-btn mp-yun-bottom" @touchstart="yunControl">
		</view>
		<view class="mp-ptz-btn mp-yun-left" @touchstart="yunControl">
		</view>
	</view>
</template>

<script>
export default {
  data (){
     return {
       robotId:"",
       isfirst:true,
       loadingHide:false
     }
  },
  methods:{
  	//云台控制开始
	yunControl() {
		let that = this;
		// 第一个方法的代码
		let params = {
			robotId: this.robotId,
			action: 'move',
			action_params: {},
		}
          // 声明 p 接受一个promise 异步函数 
		let p = new Promise((resolve, reject) => {
		    // 此处调用 touchstart 触发的接口
			FridApi.setPtzAction(params)
				.then((result) => {
					const res = result
					if (res && res.code === 0) {
					    this.isfirst = true
					    // 成功后抛出
						resolve();
					} else {
						this.$refs.uToast.show({
							message: res?.msg || "云台操作失败",
							duration: 1000,
						})
					}
				})
				.finally(() => {
					this.loading = false
				})
		});
		 // 监听 touchend 鼠标抬起事件 
		window.addEventListener("touchend", (event) => {
		    // p 函数的成功回调
			p.then(value => {
			   // 在 p 函数的 成功回调中再调用  touchend 鼠标抬起事件 
				this.yunControlEnd(params)
			})
		}, {
			once: true
		});
	},
	//云台控制结束  该方法为抬起事件的 执行接口
	yunControlEnd(params) {
		this.loadingHide = true
		// 调用接口
		FridApi.setPtzAction(params)
			.then((result) => {
				const res = result
				this.loadingHide = false
				if (res && res.code === 0) {

				} else {
					this.$refs.uToast.show({
						message: res?.msg || "云台操作失败",
						duration: 1000,
					})
					// 如果抬起事件执行失败 就再执行一次
					if (this.isfirst) {
						this.isfirst = false;
						this.yunControlEnd(params)
					}

				}
			})
			.finally(() => {
				this.loadingHide = false
			})
	},
  }
}
</script>
  1. 完成! (日常记录)
相关推荐
大怪v12 分钟前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
我是天龙_绍13 分钟前
vue3 props 如何写ts,进行类型标注
前端
叫我詹躲躲24 分钟前
n8n 自动化工作流平台完整部署
前端·langchain·领域驱动设计
遂心_2 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒2 小时前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端
王同学QaQ2 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
岛风风2 小时前
关于手机的设备信息
前端
ReturnTrue8683 小时前
nginx性能优化之Gzip
前端
程序员鱼皮3 小时前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
w_y_fan3 小时前
Flutter 滚动组件总结
前端·flutter