使用的是MPX构建的小程序，父组件有scroll-view组件设置了bounces、enhanced后，IOS阻止scroll-view回弹会生效
原需求是在page-container包裹一个子组件，子组件里面也有一个scroll-view也设置了bounces、enhanced了，但是阻止回弹不生效，同时在子组件弹出后也就是showPage为true时，结果父组件scroll-view回弹失效
现在想要的效果是父子组件的两个scroll-view的回弹都被阻止
减少代码后，如下
<template>
<scroll-view
scroll-y="{{true}}"
bounces="{{false}}"
enhanced="{{true}}"
style="height: 100vh; width: 100%"
catchtouchmove="noop"
>
<view style="height: 500rpx; background: red">1111</view>
<view style="height: 500rpx; background: green">222</view>
<view style="height: 500rpx; background: black">333</view>
<view style="height: 500rpx; background: red">3444</view>
</scroll-view>
<view
style="width: 100rpx; height: 100rpx; position: absolute; bottom: 300rpx; left: 0; z-index: 1000; background: red"
catchtap="showPageContainer"
></view>
<page-container show="{{showPage}}" round="true" catchtouchmove="noop"></page-container>
</template>
<script lang="ts">
import mpx, { createComponent } from '@mpxjs/core'
createComponent({
data: {
showPage: false,
},
methods: {
showPageContainer() {
this.showPage = true
},
noop() {},
},
})
</script>
<script name="json">
const result = {
usingComponents: {},
}
result.disableScroll = true
result.navigationStyle = 'custom'
module.exports = result
</script>
你好，麻烦提供出现问题的具体机型、微信版本号、系统版本号，以及能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）
如下方法 试试看看好不好使
1.在 <page-container> 上添加了 catchtouchmove="noop"
2.page-container 内部增加了 scroll-view
3.在 showPageContainer 方法中添加 wx.pageScrollTo({ scrollTop: 0, duration: 0 })
最终代码如下：
<template>
<scroll-view scroll-y="{{true}}" bounces="{{false}}" enhanced="{{true}}" style="height: 100vh; width: 100%" catchmove="noop">
<view style="height: 500rpx; background: red">1111</view>
<view style="height: 500rpx; background: green">222</view>
<view style="height: 500rpx; background: black">333</view>
<view style="height: 500rpx; background: red">3444</view>
</scroll-view>
<view
style="width: 100rpx; height: 100rpx; position: absolute; bottom: 300rpx; left: 0; z-index: 1000; background: red"
catchtap="showPageContainer"
></view>
<page-container show="{{showPage}}" round="true" catchtouchmove="noop">
<scroll-view scroll-y="{{true}}" bounces="{{false}}" enhanced="{{true}}" style="height: 100vh; width: 100%" catchmove="noop">
<view style="height: 500rpx; background: blue">子组件内容</view>
</scroll-view>
</page-container>
</template>
<script lang="ts">
import mpx, { createComponent } from '@mpxjs/core'
createComponent({
data: {
showPage: false,
},
methods: {
showPageContainer() {
console.log('zslog_showPageContainer')
wx.pageScrollTo({ scrollTop: 0, duration: 0 }) // 避免页面滚动
this.showPage = true
},
noop() {},
},
})
</script>
<script name="json">
const result = {
usingComponents: {},
}
result.disableScroll = false // 允许滚动
result.navigationStyle = 'custom'
module.exports = result
</script>
<!-- 父级 scroll-view -->
<scroll-view scroll-y="{{true}}" bounces="{{false}}" enhanced="{{true}}"
style="height: 100vh; width: 100%" catchmove="noop">
<view style="height: 500rpx; background: red">1111</view>
<view style="height: 500rpx; background: green">222</view>
<view style="height: 500rpx; background: black">333</view>
<view style="height: 500rpx; background: red">3444</view>
</scroll-view>
<!-- 触发 page-container -->
<view style="width: 100rpx; height: 100rpx; position: absolute; bottom: 300rpx; left: 0; z-index: 1000; background: red"
catchtap="showPageContainer"></view>
<!-- page-container 弹窗 -->
<page-container show="{{showPage}}" round="true" catchtouchmove="noop" bind:close="closePageContainer">
<view style="height: 100vh; width: 100%; overflow: hidden">
<!-- 子组件 scroll-view -->
<scroll-view scroll-y="{{true}}" bounces="{{false}}" enhanced="{{true}}"
style="height: 100vh; width: 100%" catchmove="noop">
<view style="height: 500rpx; background: blue">子组件内容</view>
</scroll-view>
</view>
</page-container>
</template>
<script lang="ts">
import mpx, { createComponent } from '@mpxjs/core'
createComponent({
data: {
showPage: false,
},
methods: {
// 显示 page-container
showPageContainer() {
console.log('zslog_showPageContainer')
wx.pageScrollTo({ scrollTop: 0, duration: 0 }) // 避免页面滚动
// 禁止页面滚动，防止 iOS 影响 scroll-view
wx.setPageStyle({
disableScroll: true,
})
this.showPage = true
},
// 关闭 page-container
closePageContainer() {
console.log('zslog_closePageContainer')
this.showPage = false
// 恢复页面滚动
wx.setPageStyle({
disableScroll: false,
})
},
noop() {},
},
})
</script>
<script name="json">
const result = {
usingComponents: {},
}
result.disableScroll = false // 允许滚动
result.navigationStyle = 'custom'
module.exports = result
</script>
<style scoped></style>