avm 的scroll-view 在小程序端异常

C-Chicken · *发表于 2021-11-26 15:53:43*

scroll-view 的 scroll-y 属性设置为true 的时候在小程序端假如里面元素过多，滚动的不是scroll-view 而是整个页面
然后当 scroll-x 的属性为 true 的时候，在小程序端，无法横向滚动

示例代码为 scroll-y ='true' 的时候， scroll-x ='true'的demo代码就暂时没有，大佬们自己测试一下

<template>
<view class="page">
<safe-area></safe-area>
<view class="test1">
<text>123123123</text>
<text>123123123</text>
<text>123123123</text>
<text>123123123</text>
<text>123123123</text>
</view>
<view class="test">
<scroll-view class="" scroll-y="true">
<view v-for="(item,index) in list">
<text>{item}</text>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
name: 'test',
install() {
},
apiready() {//like created
},
data() {
return {
list: [1, 2, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 33, 55, 66, 77, 88, 1111, 2222,1, 1, 1, 1, 1, 1, 1, 1, 1, 33, 55, 66]
}
},
methods: {
test(index) {
this.data.active = index;
}
}
}
</script>
<style>
.test3 {
width: 100%;
height: 100%;
}
.test {
flex: 1;
}
.test1 {
width: 100%;
height: 300px;
background: #000;
}
.page {
width: 100%;
height: 100%;
background: #fff;
}
</style>

复制代码

技术咨询-F · 回复于2021-11-26 16:14:34

已反馈给相关技术，有结果会回复。

杨永安 · 回复于2021-11-29 17:01:45

本帖最后由杨永安于 2021-11-30 10:15 编辑

这个不属于bug，是属于css相关设置问题。

不推荐主贴代码中，给 scroll-view 嵌套一个空的 view.test 。这样会让你的节点变得复杂，尽量使用简单的嵌套。

尝试以下改变：

1. 将 scroll-view 外层的 view 删掉，并且移植 test 类到 scroll-view 。

<template>
<view class="page">
<safe-area></safe-area>
<view class="test1">
<text>123123123</text>
<text>123123123</text>
<text>123123123</text>
<text>123123123</text>
<text>123123123</text>
</view>
<scroll-view class="test" scroll-y="true" >
<view v-for="(item,index) in list">
<text>{item}</text>
</view>
</scroll-view>
</view>
</template>

复制代码

2. 执意（或者不可避免）嵌套，充分理解 flex 布局的 flex-basis 机制：

<template>
<view class="page">
<safe-area></safe-area>
<view class="test1">
<text>123123123</text>
<text>123123123</text>
<text>123123123</text>
<text>123123123</text>
<text>123123123</text>
</view>
<view class="test">
<scroll-view class="" scroll-y="true" style="flex:1 1 0;">
<view v-for="(item,index) in list">
<text>{item}</text>
</view>
</scroll-view>
</view>
</view>
</template>

复制代码

PS: flex-basis 参考资料: https://**.**/post/6997802025614327838

[开发工具] avm 的scroll-view 在小程序端异常