微信小程序之滾動視圖容器的實現(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)文章
這篇文章主要給大家分享的是JavaScript用html5新方法操作元素類名的詳解，早先JavaScript處理起來特別不方便，需要先取到class屬性，然后對字符串進行處理?，F(xiàn)在html5給所有元素增加了classList屬性來操作類屬性，非常方便，下面就一起來看看具體操作過程吧2021-11-11
這篇文章主要為大家介紹了前端面試必會的網(wǎng)絡(luò)跨域問題解決方法講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了JS 里為什么會有 this，文章主要從語言創(chuàng)造者（JS 之父的角度）來思考 this，我之前那篇講 this 的文章是從使用者的角度寫的,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了微信小程序 本地圖片按照屏幕尺寸處理的相關(guān)資料,這里提供具體實現(xiàn)步驟，需要的朋友可以參考下2017-08-08
JS屬性scrollTop?clientHeight?scrollHeight理解學(xué)習(xí)
這篇文章主要為大家介紹了JS屬性scrollTop?clientHeight?scrollHeight理解學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序 自定義Toast實例代碼的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要為大家介紹了Page?Visibility?API?的教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
本文主要介紹Google 地圖API Map(),這里對Map()構(gòu)造器的知識做了一下整理以及提供簡單的代碼示例,開發(fā)Google 地圖應(yīng)用的朋友可以參考下2016-08-08
微信小程序 ES6Promise.all批量上傳文件實現(xiàn)代碼
這篇文章主要介紹了微信小程序 ES6Promise.all批量上傳文件實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要為大家介紹了ChatGPT前端編程秀之教你別拿編程語言不當(dāng)語言，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03