微信小程序之滚动视图容器的实现方法
发布时间:2020-12-14 20:12:40 所属栏目:资源 来源:网络整理
导读:微信小程序之滚动视图容器的实现方法 直接上两种方案代码以及效果图: 方案1 这种方案是直接使用view,并设置overflow: scroll wxss: .content { margin: 20rpx auto 0 auto; width: 710rpx; height: 300rpx; background: #ddd; border-radius: 16rpx; font-
微信小程序之滚动视图容器的实现方法 直接上两种方案代码以及效果图: 方案1这种方案是直接使用view,并设置overflow: scroll wxss: .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: wxss: .container {
position: absolute; /使用absolute的原因是因为为了防止第一个子视图有margin-top时,造成顶部留白的情况/ left: 0; top: 0; width: 100%; padding-bottom: 20rpx; } .content { 效果图: 对比结果: 因为iPhone上滚动会带有弹簧效果,所以方案1在滚动时会出现不流畅的现象。方案2就不会出现这种情况,而且滚动也是流畅的。 方案2是我目前总结出来的比较好的滚动视图方案。 如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |