更新记录

1.0.2(2024-08-02) 下载此版本

更新示例项目

1.0.1(2024-08-02) 下载此版本

基于第三方popup组件实现的bindingX手势拖拽关闭弹框


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-nvue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

借助 bindingX + popup 组件实现手势控制关闭弹框

仅支持 nvue 页面
nvue 页面定义: 在 pages.json 中定义的页面文件的文件后缀为.nvue ,包含嵌入这个.nvue 页面的.vue 组件; .vue 页面中的.nvue 组件不属于

示例项目中subNvue页面在pages.json中定义时style-mask属性在部分机型上设置transparent会出现纯白背景,请用rgba(0,0,0,0)代替

{
    "id": "xxx",
    "type": "popup",
    "path": "pages/xxx/xxx",
    "style": {
        "mask": "rgba(0,0,0,0)",
    }
}

以下组件属性及使用方式仅适合uView2.0中的u-popup,也可以使用官方扩展组件uni-popup或其他,使用非u-popup组件时部分参数和使用方式需要对应调整

安卓下开启全局手势fullPan或绑定了touchstart事件的容器中,click事件将无法触发,临时方案为绑定touchstart代替click,但按下会立即触发

组件属性(部分)

属性 类型 默认值 备注
show Boolean false 弹框显示状态
mode String "bottom" 弹框弹出方向 top|bottom|left|right
width String|Number - 弹框宽度
mode=top|bottom 时默认 100%
mode=left|right 时固定 60%
N%: 屏幕可用高度|宽度百分比
N|Npx: 像素高度
height String|Number - 弹框高度
mode=top|bottom 时默认 50%
mode=left|right 时固定 100%
N%: 屏幕可用高度|宽度百分比
N|Npx: 像素高度
isScreenHeight Boolean true 屏幕高度是否为全屏高度(全屏弹框时设为 true)
true: screenHeight
false: windowHeight
duration String|Number 300 打开弹框动画时长 单位 ms
bindTimingDuration String|Number 300 手势复位动画时长 单位 ms
backgroundColor String "#ffffff" 弹框背景颜色
opacity String|Number 0.5 遮罩透明度
fullPan Boolean false 全局弹框手势
开启后会与内部滚动视图如 scroll-view、list 冲突
threshold String|Number "50%" 滑动关闭阈值
N%: 弹框高(宽)度百分比
N|Npx: 像素高度
实际高(宽)度低于弹框高(宽)度时为 0
easing String "easeOutExpo" 弹框下滑复位动画
参阅 https://easings.net/
borderRadius String "10px" 弹框弹出方向圆角

组件方法

触摸元素绑定 touchstart 事件,调用触摸滑动

onTouchStart

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问