微信小程序之滾動視圖容器的實現(xiàn)方法
直接上兩種方案代碼以及效果圖：
方案1
這種方案是直接使用view，并設置overflow: scroll
wxml: <view class="container"> <view class="content" wx:for="{{11}}" wx:key="item"> {{item}} </view></view> 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:
<scroll-view class="main_container" scroll-y> <view class="container"> <view class="content" wx:for="{{11}}" wx:key="item"> {{item}} </view> </view></scroll-view> 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在滾動時會出現(xiàn)不流暢的現(xiàn)象。方案2就不會出現(xiàn)這種情況，而且滾動也是流暢的。
方案2是我目前總結出來的比較好的滾動視圖方案。
如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
