这篇文章将为大家详细讲解有关小程序滚动视图容器怎么实现，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
成都创新互联专业为企业提供威海网站建设、威海做网站、威海网站设计、威海网站制作等企业网站建设、网页设计与制作、威海企业网站模板建站服务，十多年威海做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
微信小程序之滚动视图容器的实现方法
直接上两种方案代码以及效果图：
方案1
这种方案是直接使用view，并设置overflow: scroll
wxml:
{{item}}
wxss:
.container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
overflow: scroll;
padding-bottom: 20rpx;
background: #FD9494;
}
.content {
margin: 20rpx auto 0 auto;
width: 710rpx;
height: 300rpx;
background: #ddd;
border-radius: 16rpx;
font-size: 80rpx;
line-height: 300rpx;
text-align: center;
}效果图：
方案2
使用scroll-view + container作为容器
wxml:
{{item}}
wxss:
.main_container {
position: relative;
width: 750rpx;
height: 100vh;
background: #FD9494;
}
.container {
position: absolute; /*使用absolute的原因是因为为了防止第一个子视图有margin-top时，造成顶部留白的情况*/
left: 0;
top: 0;
width: 100%;
padding-bottom: 20rpx;
}
.content {
margin: 20rpx auto 0 auto;
width: 710rpx;
height: 300rpx;
background: #ddd;
border-radius: 16rpx;
font-size: 80rpx;
line-height: 300rpx;
text-align: center;
}效果图：
对比结果：
因为iPhone上滚动会带有弹簧效果，所以方案1在滚动时会出现不流畅的现象。方案2就不会出现这种情况，而且滚动也是流畅的。
关于小程序滚动视图容器怎么实现就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
网站栏目：小程序滚动视图容器怎么实现
本文来源：
http://cdxtjz.cn/article/psjpsc.html
