mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
feat(Popup): add lock-scroll prop (#4384)
This commit is contained in:
parent
cb3018b26a
commit
0b273fc037
@ -107,15 +107,8 @@ Page({
|
||||
|
||||
使用组件时,会发现内容部分滚动到底时,继续划动会导致底层页面的滚动,这就是滚动穿透。
|
||||
|
||||
目前,组件内部无法很好地处理滚动穿透问题。不过,开发者仍可使用下面提供的 2 种方法自行处理:
|
||||
|
||||
#### 阻止 touchstart 事件
|
||||
|
||||
需要注意的是,这也会禁止组件内容部分的滚动
|
||||
|
||||
```html
|
||||
<van-popup catch:touchstart />
|
||||
```
|
||||
目前,组件可以通过 `lock-scroll` 属性处理部分滚动穿透问题。 **但由于小程序自身原因,弹窗内容区域仍会出现滚动穿透。**
|
||||
不过,我们为开发者提供了一个推荐方案以完整解决滚动穿透:
|
||||
|
||||
#### [page-meta](https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html)
|
||||
|
||||
@ -132,21 +125,22 @@ Page({
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| show | 是否显示弹出层 | _boolean_ | `false` | - |
|
||||
| z-index | z-index 层级 | _number_ | `100` | - |
|
||||
| overlay | 是否显示遮罩层 | _boolean_ | `true` | - |
|
||||
| position | 弹出位置,可选值为 `top` `bottom` `right` `left` | _string_ | `center` | - |
|
||||
| duration | 动画时长,单位为毫秒 | _number \| object_ | `300` | - |
|
||||
| round | 是否显示圆角 | _boolean_ | `false` | - |
|
||||
| custom-style | 自定义弹出层样式 | _string_ | `` | - |
|
||||
| overlay-style | 自定义遮罩层样式 | _string_ | `` | - |
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` | - |
|
||||
| closeable | 是否显示关闭图标 | _boolean_ | `false` | - |
|
||||
| close-icon | 关闭图标名称或图片链接 | _string_ | `cross` | - |
|
||||
| safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | _boolean_ | `true` | - |
|
||||
| safe-area-inset-top | 是否留出顶部安全距离(状态栏高度) | _boolean_ | `false` | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------------- | ------------------------------------------------ | ------------------ | -------- |
|
||||
| show | 是否显示弹出层 | _boolean_ | `false` |
|
||||
| z-index | z-index 层级 | _number_ | `100` |
|
||||
| overlay | 是否显示遮罩层 | _boolean_ | `true` |
|
||||
| position | 弹出位置,可选值为 `top` `bottom` `right` `left` | _string_ | `center` |
|
||||
| duration | 动画时长,单位为毫秒 | _number \| object_ | `300` |
|
||||
| round | 是否显示圆角 | _boolean_ | `false` |
|
||||
| custom-style | 自定义弹出层样式 | _string_ | `` |
|
||||
| overlay-style | 自定义遮罩层样式 | _string_ | `` |
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
|
||||
| closeable | 是否显示关闭图标 | _boolean_ | `false` |
|
||||
| close-icon | 关闭图标名称或图片链接 | _string_ | `cross` |
|
||||
| safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | _boolean_ | `true` |
|
||||
| safe-area-inset-top | 是否留出顶部安全距离(状态栏高度) | _boolean_ | `false` |
|
||||
| lock-scroll `1.7.3` | 是否锁定背景滚动 | _boolean_ | `true` |
|
||||
|
||||
### Events
|
||||
|
||||
|
@ -56,6 +56,10 @@ VantComponent({
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
lockScroll: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
|
@ -8,6 +8,7 @@
|
||||
custom-style="{{ overlayStyle }}"
|
||||
duration="{{ duration }}"
|
||||
bind:click="onClickOverlay"
|
||||
lock-scroll="{{ lockScroll }}"
|
||||
/>
|
||||
<view
|
||||
wx:if="{{ inited }}"
|
||||
|
Loading…
x
Reference in New Issue
Block a user