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