blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-08-30 20:59:47 +08:00
Code Issues Projects Releases Wiki Activity

feat(Popup): add lock-scroll prop (#4384)

Browse Source
This commit is contained in:
nemo-shen 2021-08-25 15:23:57 +08:00 committed by GitHub
parent cb3018b26a
commit 0b273fc037
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/popup/README.md
View File

@ -107,15 +107,8 @@ Page({
使用组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。 使用组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。
目前，组件内部无法很好地处理滚动穿透问题。不过，开发者仍可使用下面提供的 2 种方法自行处理： 目前，组件可以通过 `lock-scroll` 属性处理部分滚动穿透问题。 **但由于小程序自身原因，弹窗内容区域仍会出现滚动穿透。**
不过，我们为开发者提供了一个推荐方案以完整解决滚动穿透：
#### 阻止 touchstart 事件
需要注意的是，这也会禁止组件内容部分的滚动
```html
<van-popup catch:touchstart />
```
#### [page-meta](https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html) #### [page-meta](https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html)
@ -132,21 +125,22 @@ Page({
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | --- | | ---------------------- | ------------------------------------------------ | ------------------ | -------- |
| show | 是否显示弹出层 | _boolean_ | `false` | - | | show | 是否显示弹出层 | _boolean_ | `false` |
| z-index | z-index 层级 | _number_ | `100` | - | | z-index | z-index 层级 | _number_ | `100` |
| overlay | 是否显示遮罩层 | _boolean_ | `true` | - | | overlay | 是否显示遮罩层 | _boolean_ | `true` |
| position | 弹出位置，可选值为 `top` `bottom` `right` `left` | _string_ | `center` | - | | position | 弹出位置，可选值为 `top` `bottom` `right` `left` | _string_ | `center` |
| duration | 动画时长，单位为毫秒 | _number \| object_ | `300` | - | | duration | 动画时长，单位为毫秒 | _number \| object_ | `300` |
| round | 是否显示圆角 | _boolean_ | `false` | - | | round | 是否显示圆角 | _boolean_ | `false` |
| custom-style | 自定义弹出层样式 | _string_ | `` | - | | custom-style | 自定义弹出层样式 | _string_ | `` |
| overlay-style | 自定义遮罩层样式 | _string_ | `` | - | | overlay-style | 自定义遮罩层样式 | _string_ | `` |
| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` | - | | close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
| closeable | 是否显示关闭图标 | _boolean_ | `false` | - | | closeable | 是否显示关闭图标 | _boolean_ | `false` |
| close-icon | 关闭图标名称或图片链接 | _string_ | `cross` | - | | close-icon | 关闭图标名称或图片链接 | _string_ | `cross` |
| safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | _boolean_ | `true` | - | | safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | _boolean_ | `true` |
| safe-area-inset-top | 是否留出顶部安全距离（状态栏高度） | _boolean_ | `false` | - | | safe-area-inset-top | 是否留出顶部安全距离（状态栏高度） | _boolean_ | `false` |
| lock-scroll `1.7.3` | 是否锁定背景滚动 | _boolean_ | `true` |
### Events ### Events

4
packages/popup/index.ts
View File

@ -56,6 +56,10 @@ VantComponent({
type: Boolean, type: Boolean,
value: false, value: false,
}, },
lockScroll: {
type: Boolean,
value: true,
},
}, },
created() { created() {

1
packages/popup/index.wxml
View File

@ -8,6 +8,7 @@
custom-style="{{ overlayStyle }}" custom-style="{{ overlayStyle }}"
duration="{{ duration }}" duration="{{ duration }}"
bind:click="onClickOverlay" bind:click="onClickOverlay"
lock-scroll="{{ lockScroll }}"
/> />
<view <view
wx:if="{{ inited }}" wx:if="{{ inited }}"