這篇文章主要介紹了微信小程序之滾動視圖容器的實(shí)現(xiàn)方法的相關(guān)資料,希望通過本文能幫助到大家，讓大家掌握這部分內(nèi)容，需要的朋友可以參考下
微信小程序之滾動視圖容器的實(shí)現(xiàn)方法
直接上兩種方案代碼以及效果圖：
方案1
這種方案是直接使用view，并設(shè)置overflow: scroll
wxml:
<view class="container">
<view class="content" wx:for="{{11}}" wx:key="item">
{{item}}
</view>
</view>
登錄后復(fù)制
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;
}
登錄后復(fù)制
效果圖：
方案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>
登錄后復(fù)制
wxss:
.main_container {
position: relative;
width: 750rpx;
height: 100vh;
background: #FD9494;
}
.container {
position: absolute; /*使用absolute的原因是因?yàn)闉榱朔乐沟谝粋€(gè)子視圖有margin-top時(shí)，造成頂部留白的情況*/
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;
}
登錄后復(fù)制
效果圖：
對比結(jié)果：
因?yàn)閕Phone上滾動會帶有彈簧效果，所以方案1在滾動時(shí)會出現(xiàn)不流暢的現(xiàn)象。方案2就不會出現(xiàn)這種情況，而且滾動也是流暢的。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)！
相關(guān)推薦：
以上就是關(guān)于微信小程序滾動視圖容器的實(shí)現(xiàn)方法的詳細(xì)內(nèi)容，更多請關(guān)注有卡有網(wǎng)。
