創軟小程序開發團隊在使用的是uni-app的前端框架開發小程序時,由于屏幕需要剩余部分用滾動效果,即:用scorll-view自動填滿屏幕上剩下的高度。經過資料查找及實驗,總結方法如下。
1,使用uni.getSystemInfo(OBJECT)API接口獲取設備屏幕高度;
2,使用uni.createSelectorQuery()獲取元素到屏幕頂部的距離;
3,將屏幕高度減去元素到屏幕頂部的距離,即為可用高度(可能會存在底部bar,具體應用根據實際情況相結合)。
頁面部分的代碼
// scroll-view的代碼 class名為scrollClass,通過該名稱獲取元素到屏幕頂部的距離;使用:style動態綁定高度。 <scroll-view scroll-y="true" class="scrollClass" :style="{height:scrollHeight+'px'}"> //此處省略滾動內部的代碼 </scroll-view>
JS部分代碼
// data部分的代碼 data() { return { scrollHeight:0, //元素的所需高度 } },
//onReady部分代碼(以下代碼只能放到 onReady) onReady() { let _this = this; uni.getSystemInfo({ //調用uni-app接口獲取屏幕高度 success(res) { //成功回調函數 let wHeight=res.windowHeight //windoHeight為窗口高度,主要使用的是這個 let titleH=uni.createSelectorQuery().select(".scrollView"); //想要獲取高度的元素名(class/id) titleH.boundingClientRect(data=>{ _this.scrollHeight=wHeight-data.top //計算高度:元素高度=窗口高度-元素距離頂部的距離(data.top) }).exec() } }) },