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

本文主要是介绍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>

2. 完成！ （日常记录）

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

---