參考資料:
https://blog.csdn.net/qq_41906710/article/details/103628198
最近在做一個非常小的項目六荒,使用的是uni-app的前端框架,在使用過程中遇到了一個問題啊央,就是如何是scorll-view自動填滿屏幕上剩下的高度缔赠,在網(wǎng)上找了很多教程,但是詳細的并不太多。此次就當是在學習過程中的一個記錄吧功蜓!有需要的朋友可以拿走看看园爷。
思路:
1.使用uni.getSystemInfo(OBJECT)API接口獲取設(shè)備屏幕高度
2.使用uni.createSelectorQuery()獲取元素到屏幕頂部的距離
實現(xiàn)過程:
1.頁面部分的代碼(只放需要獲取的部分了其他部分根據(jù)情況來)
// scroll-view的代碼 class名為sv 使用:style動態(tài)綁定高度
<scroll-view scroll-y="true" class="sv" :style="{height:navHeight+'px'}">
<view class="listItem" v-for="(item,index) in tvArry" :key="index" @click="skip">
<view class="leftBox">
<image :src="item.themb" class="leftImg"></image>
</view>
<view class="rightBox">
<view class="title">{{item.name}}</view>
<view class="sTitle">
{{item.name}}{{item.time}}
</view>
</view>
</view>
</scroll-view>
2.JS部分代碼主要思路就是:通過屏幕可見高度-元素距離頂部的高度=屏幕剩余高度(元素高度);
data部分的代碼:提前定義好接受數(shù)據(jù)的參數(shù)式撼。
// data部分的代碼
data() {
return {
pH:0, //窗口高度
navHeight:0, //元素的所需高度
}
},
onReady部分代碼:每次刷新頁面獲取一次高度
onReady() {
let that=this;
uni.getSystemInfo({ //調(diào)用uni-app接口獲取屏幕高度
success(res) { //成功回調(diào)函數(shù)
that._data.pH=res.windowHeight //windoHeight為窗口高度童社,主要使用的是這個
let titleH=uni.createSelectorQuery().select(".sv"); //想要獲取高度的元素名(class/id)
titleH.boundingClientRect(data=>{
let pH=that._data.pH;
that._data.navHeight=pH-data.top //計算高度:元素高度=窗口高度-元素距離頂部的距離(data.top)
}).exec()
}
})
},