uniapp H5 touchstart执行完成并返回成功再执行touchend 失败则不执行touchend
- 直接上代码
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>- 完成！ （日常记录）