uniapp scroll-view 最后两行不显示

分类：uni-app

在H5和APP中，datas数组最后两行无法显示，滚动到数组中倒数第三项就无法再滚动了。如果往数组中再增加一行数据，则又可以滚动一行，总而言之就是最后两行显示不出来。将uni-row和uni-col改成view也是如此，有知道如何解决的，请告知，谢谢！
模板中内容：

<scroll-view scroll-y="true" scroll-x="true" class="scroll">  
    <uni-row v-for="(item,index) in datas" class="margin-lr-sm">  
        <uni-col :span="16">  
            <view class="padding-tb-sm">{{item.school}}</view>  
        </uni-col>  
        <uni-col :span="8">  
            <view class="padding-tb-sm" >{{item.city}}</view>  
        </uni-col>  

    </uni-row>  
</scroll-view>

样式：

.scroll {  
        position: fixed;  
        width: 100%;  
        height: 100%;  
        left: 0vw;  
        background-color: #ffffff;  
        transition: all 0.4s;  
    }

补充：我发现之所以会出现这样的问题，是因为scroll-view没有占据整个页面，在scroll-view的上方还有两行view，用于显示其他内容。那么问题肯定就是出现在scroll-view的高度设置上，不应该为100%，那么到底如何设计才正确呢？

补充2：研究了一下百度中给出的方案，大都是在onReady中进行计算scroll-view的高度，经测试，这种方法对于在onLoad中加载数据的情况是有效的。但是如果datas数据是后续查询得出的，仍然是有部分数据是无法显示出来的。

2022-07-23 21:28 负责人:无分享

3 个回复

DCloud_UNI_WZF

看起来应该是样式设置问题，非组件问题，可设置 scroll-view 固定高度（比如：400px）确定问题点

s***@163.com (作者)

固定高度是可以做到全部显示，但是可移植性就差了

2022-07-26 10:37
DCloud_UNI_WZF

回复 s***@163.com: 我的意思是固定高度可以，就说明不是组件的问题，是样式设置的问题，请调整样式设置

2022-07-26 10:44
1***@qq.com

回复 DCloud_UNI_WZF：动态设置高度，莫名奇妙变大了，导致显示不全

2023-06-12 11:33
1***@qq.com

回复 DCloud_UNI_WZF: 我的截图和代码，放到这个博主评论里了，你看看

2023-06-12 11:37

7***@qq.com

给scroll-view里边的内容加padding-bottom试试。

DCloud_UNI_WZF

测试vue3 H5端未发现问题

2022-08-25 14:24

1***@qq.com

这就试设置高度有问题，根本显示不全，动态的获取的高度, mounted() {
let view = uni.createSelectorQuery().in(this).select(".hbh_right");

        view.fields({  
            size: true  
        }, data => {  
            this.height = data.height  
            console.log(this.height,"-------------")  
            this.getNovelList()  
        }).exec();  
    },

要回复问题请先登录或注册

uniapp scroll-view 最后两行不显示

3 个回复

公告

相关问题

uniapp scroll-view 最后两行不显示

与内容相关的链接

3 个回复

公告

相关问题