弹框实现效果及对话框跟随手势下拉的实现方法解析

hwyzw · 发表于昨天 02:42

<p[]一、先看一下弹框实现效果1.抖音实现效果
2.我的实现效果

二、对话框跟随手势下拉实现

通过观察展示的成果截图，能够察觉到浮动框会随手势朝下方向位移并达成同步位移，要达成此功能，必须测量出手势朝下移动的具体数值，接着将这个数值赋予浮动框，以此决定其向下收起的幅度。

即：弹窗向下移动的距离 = 手势向下移动的距离

1.手势向下移动距离的计算公式

手势下移的长度等于手势移动末点的Y值减去手势移动起点的Y值

在中提供了可以兼容多端的监听页面上元素的触摸方法：

1.手指开始触摸元素

.：.(: ):

2.手指触摸元素后移动。

.：.(: ):

3.手指结束触摸元素

.：.(: ):

 字段定义如下：

字段类型必填默认值说明

array

触摸事件，当前停留在屏幕中的触摸点信息的数组

array

触摸事件，当前变化的触摸点信息的数组

2.获取手势向下移动的距离

接下来会借助选项api来完成对应任务，这样做也是为了能够同时适配vue2和vue3的不同版本。

 <pre><code class="hljs language-js" lang="js"><template>
<uni-popup ref="popup" type="bottom">
<view class="content"
 @touchstart="touchstart"
 @touchmove="touchmove"
>
 ...
</view>
</uni-popup>
</template>
<script>
 export default {
data() {
 return {
 // 手势向下移动距离
 moveDistance: 0
 }
},
methods: {
 // 开始触摸元素
 touchstart(e) {
 this.startY = e.changedTouches[0].clientY;
 this.startIme = Date.now()
 this.toumoveTime = Date.now()
 },
 // 触摸元素后移动
 touchmove(e) {
 const clientY = e.changedTouches[0].clientY;
 // 忽略上划
 if (clientY < this.startY) {
 return
 }
 // 下滑，计算手势移动距离
 this.moveDistance = clientY - this.startY
 },
}
 }
</script>
</code></pre>

通过e..可获取当前屏幕触摸的Y坐标。

3.弹框向下隐藏同步手指向下触摸移动距离

利用css属性调整弹窗的向下偏移量，能够实现弹窗的隐藏功能。

: `(${this.}px)`

 <pre><code class="hljs language-js" lang="js"><script>
 export default {
data() {
 return {
 // 手势向下移动距离
 moveDistance: 0
 }
},
computed: {
 contentStyle() {
 return {
 transform: `translateY(${this.moveDistance}px)`,
 }
 }
},
 }
</script>
<template>
<uni-popup ref="popup" type="bottom">
<view class="content"
 ...
 :style="contentStyle"
>
 ...
</view>
</uni-popup>
</template>
</code></pre>
三、关闭弹窗时机

弹窗的拖拽功能现已实现，接下来要设定其收起时机，在符合标准时执行this.$refs.popup.close()指令来关闭弹窗。经过反复验证，发现抖音的评论弹窗存在两种触发收起的状况，一是当界面底部达到特定距离，二是当用户迅速完成对元素的起始、移动及结束触碰这三个连续动作时，弹窗便会自动关闭。

关闭弹窗后，我们能够对元素附加处理，在触摸动作完成之际开展必要运算。

1.计算距离底部距离

距离底部距离 = 窗口高度 - 当前手指触摸结束的Y坐标

 <pre><code class="hljs language-js" lang="js">touchend(e) {
// 触摸结束Y坐标
const clientY = e.changedTouches[0].clientY;
// 获取窗口高度
const { windowHeight } = uni.getSystemInfoSync();
// 距离底部距离
const距离等于窗口高度减去当前指针位置
}
</code></pre>
2.计算手势完成时间

 <pre><code class="hljs language-js" lang="js">touchstart(e) {
this.startIme = Date.now()
},
touchend(e) {
// 手势完成时间（毫秒）
const toumoveTime = Date.now() - this.startIme
},
</code></pre>
3.根据计算值，完成弹窗关闭逻辑

 <pre><code class="hljs language-js" lang="js">touchend(e) {
// 触摸结束Y坐标
const clientY = e.changedTouches[0].clientY;
// 获取窗口高度
const { windowHeight } = uni.getSystemInfoSync();
// 距离底部距离

弹框实现效果及对话框跟随手势下拉的实现方法解析

更多帖子推荐