小程序滚动视图容器怎么实现
这篇文章将为大家详细讲解有关小程序滚动视图容器怎么实现,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联专业为企业提供威海网站建设、威海做网站、威海网站设计、威海网站制作等企业网站建设、网页设计与制作、威海企业网站模板建站服务,十多年威海做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
微信小程序之滚动视图容器的实现方法
直接上两种方案代码以及效果图:
方案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就不会出现这种情况,而且滚动也是流畅的。
关于小程序滚动视图容器怎么实现就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
名称栏目:小程序滚动视图容器怎么实现
网页URL:http://azwzsj.com/article/psjpsc.html