本文主要介紹了微信小程式之滾動視圖容器的實現方法的相關資料,希望透過本文能幫助到大家,讓大家掌握這部分內容,需要的朋友可以參考下,希望能幫助到大家。
微信小程式之滾動視圖容器的實作方法
直接上兩種方案程式碼以及效果圖:
方案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在捲動時會出現不流暢的現象。方案2就不會出現這種情況,而且滾動也是流暢的。
方案2是我目前總結出來的比較好的滾動視圖方案。
相關推薦:
以上是微信小程式滾動視圖容器如何實現的的詳細內容。更多資訊請關注PHP中文網其他相關文章!