更新记录
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