uni-app中scroll-view的高度問題韵吨,填滿剩下的高度且高度自適應

參考資料:
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()
        }
    })
},

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市著隆,隨后出現(xiàn)的幾起案子扰楼,更是在濱河造成了極大的恐慌,老刑警劉巖美浦,帶你破解...
    沈念sama閱讀 219,589評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件弦赖,死亡現(xiàn)場離奇詭異,居然都是意外死亡浦辨,警方通過查閱死者的電腦和手機蹬竖,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,615評論 3 396
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來流酬,“玉大人币厕,你說我怎么就攤上這事⊙刻冢” “怎么了旦装?”我有些...
    開封第一講書人閱讀 165,933評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長摊滔。 經(jīng)常有香客問我同辣,道長,這世上最難降的妖魔是什么惭载? 我笑而不...
    開封第一講書人閱讀 58,976評論 1 295
  • 正文 為了忘掉前任旱函,我火速辦了婚禮,結(jié)果婚禮上描滔,老公的妹妹穿的比我還像新娘棒妨。我一直安慰自己,他們只是感情好含长,可當我...
    茶點故事閱讀 67,999評論 6 393
  • 文/花漫 我一把揭開白布券腔。 她就那樣靜靜地躺著,像睡著了一般拘泞。 火紅的嫁衣襯著肌膚如雪纷纫。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,775評論 1 307
  • 那天陪腌,我揣著相機與錄音辱魁,去河邊找鬼烟瞧。 笑死,一個胖子當著我的面吹牛染簇,可吹牛的內(nèi)容都是我干的参滴。 我是一名探鬼主播,決...
    沈念sama閱讀 40,474評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼锻弓,長吁一口氣:“原來是場噩夢啊……” “哼砾赔!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起青灼,我...
    開封第一講書人閱讀 39,359評論 0 276
  • 序言:老撾萬榮一對情侶失蹤暴心,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后杂拨,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體专普,經(jīng)...
    沈念sama閱讀 45,854評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,007評論 3 338
  • 正文 我和宋清朗相戀三年扳躬,在試婚紗的時候發(fā)現(xiàn)自己被綠了脆诉。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片甚亭。...
    茶點故事閱讀 40,146評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡贷币,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出亏狰,到底是詐尸還是另有隱情役纹,我是刑警寧澤,帶...
    沈念sama閱讀 35,826評論 5 346
  • 正文 年R本政府宣布暇唾,位于F島的核電站促脉,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏策州。R本人自食惡果不足惜瘸味,卻給世界環(huán)境...
    茶點故事閱讀 41,484評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望够挂。 院中可真熱鬧旁仿,春花似錦、人聲如沸孽糖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,029評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽办悟。三九已至尘奏,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間病蛉,已是汗流浹背炫加。 一陣腳步聲響...
    開封第一講書人閱讀 33,153評論 1 272
  • 我被黑心中介騙來泰國打工瑰煎, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人琢感。 一個月前我還...
    沈念sama閱讀 48,420評論 3 373
  • 正文 我出身青樓丢间,卻偏偏與公主長得像,于是被迫代替她去往敵國和親驹针。 傳聞我的和親對象是個殘疾皇子烘挫,可洞房花燭夜當晚...
    茶點故事閱讀 45,107評論 2 356