- movable-view组件沿着屏幕边缘进行拖拽,停止时并不会触发touchend事件?
<template> <view> <movable-area class="movable-area" :style="{ zIndex: isRemove ? 982 : 981, }" :scale-area="false" > <movable-view class="movable-view" :class="!isRemove ? 'animation-info' : ''" style="pointer-events: auto" @click="clickBtn" @touchstart="touchstart" @touchend="touchend" @change="onChange" direction="all" inertia="true" :x="x" :y="y" :disabled="disabled" :out-of-bounds="false" :damping="200" :friction="100" > <slot></slot> </movable-view> </movable-area> </view> </template> <script> export default { props: { //是否禁用拖动 disabled: { type: Boolean, default: false, }, //是否自动停靠 canDocking: { type: Boolean, default: true, }, //按钮默认位置离底部距离(px) bottomPx: { type: Number, default: 200, }, //按钮默认位置离右边距离(px) rightPx: { type: Number, default: 375, }, }, data() { return { left: 0, top: 0, isRemove: false, windowWidth: 0, windowHeight: 0, btnWidth: 0, btnHeight: 0, x: 0, y: 600, old: { x: 0, y: 0, }, topHeight: 0, }; }, mounted() { const that = this; uni.getSystemInfo({ success: function (res) { that.topHeight = res.safeArea.top * 2; }, }); this.$nextTick(() => { this.getSysInfo(); }); }, methods: { getSysInfo() { let sysInfo = uni.getSystemInfoSync(); this.windowWidth = sysInfo.windowWidth; this.windowHeight = sysInfo.windowHeight; // #ifdef MP-WEIXIN let view = uni.createSelectorQuery().in(this).select(".movable-view"); view .boundingClientRect((rect) => { if (!rect) return; this.btnWidth = rect.width; this.btnHeight = rect.height; this.x = this.old.x; this.y = this.old.y; this.$nextTick((res) => { // this.x = this.windowWidth - this.btnWidth - this.rightPx; this.x = 0; this.y = this.windowHeight - this.btnHeight - this.bottomPx; }); }) .exec(); // #endif // #ifdef MP-ALIPAY let view = my.createSelectorQuery().in().select(".movable-view"); view.boundingClientRect().exec((rect) => { if (!rect) return; this.btnWidth = rect[0].width; this.btnHeight = rect[0].height; this.x = this.old.x; this.y = this.old.y; this.$nextTick((res) => { // this.x = this.windowWidth - this.btnWidth - this.rightPx; this.x = 0; this.y = this.windowHeight - this.btnHeight - this.bottomPx; }); }); // #endif }, //移动按钮 onChange(e) { this.old.x = e.detail.x; this.old.y = e.detail.y; }, //开始移动 touchstart(e) { this.isRemove = true; }, //结束移动 touchend(e) { if (this.canDocking && this.old.x) { this.x = this.old.x; this.y = this.old.y; let bWidth = (this.windowWidth - this.btnWidth) / 2; if (this.x < 0 || (this.x > 0 && this.x <= bWidth)) { this.$nextTick((res) => { this.x = 0; }); } else { this.$nextTick((res) => { this.x = this.windowWidth - this.btnWidth; }); } if (this.y <= this.topHeight) { this.$nextTick((res) => { this.y = this.topHeight; }); } this.isRemove = false; } this.$nextTick(() => { this.$emit("dragIconDTouchend"); }); }, //点击按钮 clickBtn() { this.$emit("clickBtn"); }, updateY(y) { this.y = y; }, }, }; </script> <style scoped> .movable-view { width: 146rpx; height: 146rpx; /* background: linear-gradient(360deg, #287BF8 0%, #6EA8FF 100%); */ /* box-shadow: 0px 4rpx 12rpx 0px #ADC3F8; */ border-radius: 50rpx; color: #ffffff; font-size: 26rpx; touch-action: none; display: flex; align-items: center; justify-content: center; } .animation-info { transition: left 0.25s ease; } .movable-area { width: 100%; height: 100%; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } </style> 我有两个拖拽组件,在停止时动态计算两个组件的位置并算出是否重叠然后更新位置,但是实际测试中只要沿着屏幕边缘进行拖拽时,组件的touchend事件并不会响应,调试中也没有log输出
07-10 - web分析中最近出现了__inner_msg__created__ is not defined?
[图片]目前不知道为什么出现了这个报错,下载的Source Map 文件中也搜不到
01-02 - map组件可以不授权定位吗?
我这边的需求是,打开地图会显示两个点,A是用户自身定位点,B是目标定位点,B点经纬度已知;目前我这边没有调用任何授权,居然可以显示用户自身的定位点;是否可以不用多调用一次授权呢
2024-11-12 - 点击小胶囊的重新进入小程序 安卓会执行onHide但ios不会执行?
因为无法监听重新进入小程序这个按钮相关的事件和启动值,这边是在完成一定操作后缓存了一个值作为记录,用户再点击重新进入小程序时判断是否有这个字段,有则拦截,在onHide生命周期时移除这个字段(因为不能拦截用户退出小程序在扫码打开这个操作);实际是ios可以实现拦截,安卓不行,安卓会在重新进入小程序时执行onHide生命周期导致字段移除从而无法拦截
2024-09-23 - 小程序中的页面实际上不会白屏,但是web分析里记录了白屏是为什么?(页面很空,就一张图片两个按钮)
[图片][图片]
2024-07-08 - 用户点击右上角三个点中的重新进入小程序如何捕捉此事件?
用户点击右上角三个点中的重新进入小程序如何捕捉此事件?想做点击后回到首页
2023-11-17