直接上兩種方案代碼以及效果圖：
方案1
- 這種方案是直接使用
view传藏，并設(shè)置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;
}
效果圖：
IMG_5550.TRIM.gif
方案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;
}
需要在頁面json里添加："disableScroll": true
效果圖：
IMG_5552.TRIM.gif
對比結(jié)果：
因為iPhone上滾動會帶有彈簧效果掀虎，所以方案1在滾動時會出現(xiàn)不流暢的現(xiàn)象抹估。方案2就不會出現(xiàn)這種情況素征，而且滾動也是流暢的悄窃。
方案2是我目前總結(jié)出來的比較好的滾動視圖方案急凰。
注意
- 因為方案二使用了
scroll-view女仰，所以在使用有些官方不推薦在scroll-view中使用的組件（如canvas）時需要注意。
