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. 完成! (日常记录)
相关推荐
程序员码歌34 分钟前
短思考第261天,浪费时间的十个低效行为,看看你中了几个?
前端·ai编程
Swift社区1 小时前
React Navigation 生命周期完整心智模型
前端·react.js·前端框架
若梦plus1 小时前
从微信公众号&小程序的SDK剖析JSBridge
前端
用泥种荷花2 小时前
Python环境安装
前端
Light602 小时前
性能提升 60%:前端性能优化终极指南
前端·性能优化·图片压缩·渲染优化·按需拆包·边缘缓存·ai 自动化
Jimmy2 小时前
年终总结 - 2025 故事集
前端·后端·程序员
烛阴2 小时前
C# 正则表达式(2):Regex 基础语法与常用 API 全解析
前端·正则表达式·c#
roman_日积跬步-终至千里2 小时前
【人工智能导论】02-搜索-高级搜索策略探索篇:从约束满足到博弈搜索
java·前端·人工智能
GIS之路2 小时前
GIS 数据转换:使用 GDAL 将 TXT 转换为 Shp 数据
前端
多看书少吃饭3 小时前
从Vue到Nuxt.js
前端·javascript·vue.js