关于微信小程序滚动视图容器的实现方法（微信小程序可滚动视图区域）

关于微信小程序滚动视图容器的实现方法（微信小程序可滚动视图区域）

这篇文章主要介绍了微信小程序之滚动视图容器的实现方法的相关资料,希望通过本文能帮助到大家，让大家掌握这部分内容，需要的朋友可以参考下

微信小程序之滚动视图容器的实现方法

直接上两种方案代码以及效果图：

方案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;}-

效果图：

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

方案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就不会出现这种情况，而且滚动也是流畅的。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。