微信小程序之滾動視圖容器的實現(xiàn)方法
更新時間：2017年09月26日 14:50:33 作者：tomfriwel
這篇文章主要介紹了微信小程序之滾動視圖容器的實現(xiàn)方法的相關(guān)資料,希望通過本文能幫助到大家，讓大家掌握這部分內(nèi)容，需要的朋友可以參考下
微信小程序之滾動視圖容器的實現(xiàn)方法
直接上兩種方案代碼以及效果圖：
方案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;
}
效果圖：
方案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;
}
效果圖：
對比結(jié)果：
因為iPhone上滾動會帶有彈簧效果，所以方案1在滾動時會出現(xiàn)不流暢的現(xiàn)象。方案2就不會出現(xiàn)這種情況，而且滾動也是流暢的。
方案2是我目前總結(jié)出來的比較好的滾動視圖方案。
如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
美化下拉列表...2006-06-06
這篇文章主要介紹了微信小程序progress組件詳細介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
Css-In-Js實現(xiàn)classNames庫源碼解讀
這篇文章主要為大家介紹了Css-In-Js實現(xiàn)classNames庫源碼解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
lodash內(nèi)部方法getFuncName及setToString剖析詳解
本篇章我們主要是通過了解lodash里的兩個內(nèi)部方法getFuncName方法和setToString方法，在實際開發(fā)中我們也可以借鑒方法的實現(xiàn)思路，在需要的時候簡單封裝一下，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
TypeScript實用技巧?Nominal?Typing名義類型詳解
這篇文章主要為大家介紹了TypeScript實用技巧?Nominal?Typing名義類型詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了微信小程序 實戰(zhàn)實例開發(fā)流程詳細介紹的相關(guān)資料,這里主要介紹微信小程序的開發(fā)流程和簡單實例，需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序 input表單與redio及下拉列表的使用實例的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要為大家介紹了JavaScript前端面試組合函數(shù)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹了解決React中的re-render問題,相信很多人都遇到過。接下來給大家具體講講這個問題,需要的朋友可以參考y一下，洗碗給對你有所幫助2022-01-01
這篇文章主要介紹了微信小程序 picker 組件詳解及簡單實例的相關(guān)資料,需要的朋友可以參考下2017-01-01