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

2024-01-31 22:36

本文主要是介绍uniapp H5 touchstart执行完成并返回成功再执行touchend 失败则不执行touchend,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

  1. 直接上代码
<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 = resultif (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 = resultthis.loadingHide = falseif (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. 完成! (日常记录)

这篇关于uniapp H5 touchstart执行完成并返回成功再执行touchend 失败则不执行touchend的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/665266

相关文章

Springboot项目启动失败提示找不到dao类的解决

《Springboot项目启动失败提示找不到dao类的解决》SpringBoot启动失败,因ProductServiceImpl未正确注入ProductDao,原因:Dao未注册为Bean,解决:在启... 目录错误描述原因解决方法总结***************************APPLICA编

解密SQL查询语句执行的过程

《解密SQL查询语句执行的过程》文章讲解了SQL语句的执行流程,涵盖解析、优化、执行三个核心阶段,并介绍执行计划查看方法EXPLAIN,同时提出性能优化技巧如合理使用索引、避免SELECT*、JOIN... 目录1. SQL语句的基本结构2. SQL语句的执行过程3. SQL语句的执行计划4. 常见的性能优

Spring Bean初始化及@PostConstruc执行顺序示例详解

《SpringBean初始化及@PostConstruc执行顺序示例详解》本文给大家介绍SpringBean初始化及@PostConstruc执行顺序,本文通过实例代码给大家介绍的非常详细,对大家的... 目录1. Bean初始化执行顺序2. 成员变量初始化顺序2.1 普通Java类(非Spring环境)(

Spring Boot 中的默认异常处理机制及执行流程

《SpringBoot中的默认异常处理机制及执行流程》SpringBoot内置BasicErrorController,自动处理异常并生成HTML/JSON响应,支持自定义错误路径、配置及扩展,如... 目录Spring Boot 异常处理机制详解默认错误页面功能自动异常转换机制错误属性配置选项默认错误处理

如何在Java Spring实现异步执行(详细篇)

《如何在JavaSpring实现异步执行(详细篇)》Spring框架通过@Async、Executor等实现异步执行,提升系统性能与响应速度,支持自定义线程池管理并发,本文给大家介绍如何在Sprin... 目录前言1. 使用 @Async 实现异步执行1.1 启用异步执行支持1.2 创建异步方法1.3 调用

Spring Boot Maven 插件如何构建可执行 JAR 的核心配置

《SpringBootMaven插件如何构建可执行JAR的核心配置》SpringBoot核心Maven插件,用于生成可执行JAR/WAR,内置服务器简化部署,支持热部署、多环境配置及依赖管理... 目录前言一、插件的核心功能与目标1.1 插件的定位1.2 插件的 Goals(目标)1.3 插件定位1.4 核

SpringBoot整合Dubbo+ZK注册失败的坑及解决

《SpringBoot整合Dubbo+ZK注册失败的坑及解决》使用Dubbo框架时,需在公共pom添加依赖,启动类加@EnableDubbo,实现类用@DubboService替代@Service,配... 目录1.先看下公共的pom(maven创建的pom工程)2.启动类上加@EnableDubbo3.实

mybatis执行insert返回id实现详解

《mybatis执行insert返回id实现详解》MyBatis插入操作默认返回受影响行数,需通过useGeneratedKeys+keyProperty或selectKey获取主键ID,确保主键为自... 目录 两种方式获取自增 ID:1. ​​useGeneratedKeys+keyProperty(推

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》:本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景

Navicat数据表的数据添加,删除及使用sql完成数据的添加过程

《Navicat数据表的数据添加,删除及使用sql完成数据的添加过程》:本文主要介绍Navicat数据表的数据添加,删除及使用sql完成数据的添加过程,具有很好的参考价值,希望对大家有所帮助,如有... 目录Navicat数据表数据添加,删除及使用sql完成数据添加选中操作的表则出现如下界面,查看左下角从左