弹框实现效果及对话框跟随手势下拉的实现方法解析湖南seo优化计划

日期：2026-02-02 08:48 / 作者：网络

<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坐标

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.根据计算值，完成弹窗关闭逻辑

const distance = windowHeight - clientY // 滑动时间（毫秒），小于某个时间则自动close const toumoveTime = Date.now() - this.startIme // 必须触发了touchmove方法 if (this.moveDistance > 0 && (distance < this.bottomCloseValue || toumoveTime < this.moveCloseTime)) { this.close(); } else { this.moveDistance = 0; } }, </code></pre>

当触摸动作停止后，如果符合预设的间距标准，并且达到规定的完成时限，那么就会撤销那个弹出界面；否则，就会把弹窗恢复原状。

四、打开全屏

全屏模式的核心在于确定可用的显示区域，同时将弹出窗口的尺寸调整为该区域的高度。

<pre><code class="hljs language-js" lang="js">toggleFullScreen() { if (this.isFullScrren) { // 关闭全屏，高度设为内容高度 this.height = this.contentHeight } else { // 开启全屏，设为视口高度 this.height = this.windowHeight } this.isFullScrren = !this.isFullScrren }, </code></pre>

同时兼容ios微信小程序和App端顶部和底部安全区域适配

适配手机顶部和底部安全区域

<pre><code class="hljs language-js" lang="js">const { safeArea, windowHeight, screenHeight, osName } = uni.getSystemInfoSync(); 调整布局以适应顶部和底部预留空间, safeArea.height指定安全区域的高度, 以逻辑像素计 const安全视口高度等于视口高度减去屏幕高度与安全区域之差bottom) // 打开全屏的高度 this.windowHeight = safeWindowHeight </code></pre>

适配手机app端顶部和底部安全区域

<pre><code class="hljs language-js" lang="js">// #ifdef APP-PLUS const { windowHeight, osName } = uni.getSystemInfoSync(); if (osName === 'ios') { // ios没设备 } else { // android 打开全屏的高度 this.windowHeight = windowHeight } </code></pre>

五、总结

以上实现主要有三部分内容：

1.弹窗跟随手势向下移动。

2.手势距离底部一定距离或者手势移动足够快关闭弹窗。

运用uni.()方法取得设备相关数据，依据这些数据计算弹出层所需的全屏垂直尺寸，确保能适配多种设备规格。

去体验插件：插件市场

弹框实现效果及对话框跟随手势下拉的实现方法解析 湖南seo优化计划

弹框实现效果及对话框跟随手势下拉的实现方法解析湖南seo优化计划