uni-app nvue页面list组件和scroll-view组件在页面内容超过一屏情况下就不滚动

uni-app nvue页面list组件和scroll-view组件在页面内容超过一屏情况下就不滚动

这也太坑了吧，nvue没有区域滚动方案了吗？

<template>
<view>
<scroll-view :scroll-top="scrollTop" scroll-y="true" scroll-x="true" class="scroll-Y" @scrolltoupper="upper"
@scrolltolower="lower" @scroll="scroll" style="height: 100px;">
<view id="demo1" class="scroll-view-item " style="background-color: red;">A</view>
<view id="demo2" class="scroll-view-item "style="background-color: green;">B</view>
<view id="demo3" class="scroll-view-item "style="background-color: blue;">C</view>
</scroll-view>
</view>
<view style="height: 4000px;"></view>
</template> 

<script>
export default {
data() {
return {
scrollTop: 0,
old: {
scrollTop: 0
}
}
},
methods: {
upper: function(e) {
console.log(e)
},
lower: function(e) {
console.log(e)
},
scroll: function(e) {
console.log(e)
this.old.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
// 解决view层不同步的问题
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
uni.showToast({
icon: "none",
title: "纵向滚动 scrollTop 值已被修改为 0"
})
}
}
}
</script> 

.scroll-Y {
height: 300rpx;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.scroll-view-item {
width: 720rpx;
height: 300rpx;
line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}

更多关于uni-app nvue页面list组件和scroll-view组件在页面内容超过一屏情况下就不滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

不理解你写这个<view style="height: 4000px;"></view>是干什么用的，正常nvue页面，区域滚动 scrollview可以正常使用

更多关于uni-app nvue页面list组件和scroll-view组件在页面内容超过一屏情况下就不滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


<view style="height: 4000px;"></view>就是超过一屏的高度的

在nvue中使用scroll-view确实有一些限制需要注意：

  1. nvue的scroll-view需要明确设置高度才能滚动，你虽然设置了100px的高度，但外层view没有限制高度可能导致滚动失效

  2. 你的代码中同时设置了scroll-y和scroll-x，建议只保留需要的滚动方向

  3. nvue中推荐使用flex布局，可以尝试修改样式如下：

.scroll-Y {
  flex: 1;
  height: 300rpx;
}

  1. 检查是否在manifest.json中启用了nvue编译模式

  2. 可以尝试使用list组件替代，list在nvue中性能更好：

<list class="list">
  <cell v-for="(item,index) in items" :key="index">
    <view class="item">{{item}}</view>
  </cell>
</list>
回到顶部