文檔
- uni-app文檔：https://uniapp.dcloud.net.cn/component/scroll-view.html
使用豎向滾動時，需要給 一個固定高度，通過 css 設置 height
- 微信文檔：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
使用豎向滾動時，需要給scroll-view一個固定高度，通過 WXSS 設置 height
所以，給scroll-view設置一個固定高度就可以了
方案1：js計算高度
實現(xiàn)原理：
通過js獲取設備高度和外層父元素位置信息，動態(tài)計算出剩余高度，也就是scroll-view的高度
// 獲取總高度
let screenHeight = uni.getSystemInfoSync().windowHeight;
// 布局位置信息
const query = uni.createSelectorQuery().in(this)
query
.select('#scroll-view')
.boundingClientRect((data) => {
// @ts-ignore
console.log('得到布局位置信息' + JSON.stringify(data))
// @ts-ignore
this.height = `height:${data.height}px;`
})
.exec()
<scroll-view
v-if="height"
:style="height"
bindscrolltolower="scrolltolower"
scroll-y
>
</scroll-view>
js的方案有一個弊端，我實際獲取布局信息的時候，并沒有獲取到元素的布局信息，而是獲取到了整屏幕的高度
方案2：使用flex布局
該方案和小程序無關，是css的知識
使用flex縱向布局，讓scroll-view占滿剩余高度
布局示例
<view class="main">
<view class="title"></view>
<scroll-view
scroll-top="scrollTop"
scroll-y="true"
class="scroll-view"
@scrolltolower="handleScrollToLower"
>
</scroll-view>
</view>
.main {
height: 100%;
display:flex;
flex-direction: column; // 豎向排列
}
.title{
height: 100rpx;
}
.scroll-view {
flex: 1; // 撐滿剩余高度
height: 0; // 關鍵屬性，否則scroll-view不生效
}
關鍵屬性是height: 0,如果沒有該屬性，高度會溢出，不會出現(xiàn)滾動效果文章來源：http://www.zghlxwxcb.cn/news/detail-493613.html
還有一個注意的點，要一直向上檢查父元素的高度都是height: 100%;文章來源地址http://www.zghlxwxcb.cn/news/detail-493613.html
參考
- 一招搞定微信小程序ScrollView等組件高度自適應
- 縱向flex布局中高度的問題
到了這里，關于uni-app/微信小程序：scroll-view縱向滾動高度自適應flex布局填充剩余高度的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
