微信小程式中使元素佔滿整個螢幕高度實現方法

2022-10-07 13:09:09 字數 674 閱讀 9114

微信小程式中使元素佔滿整個螢幕高度實現方法

在專案中經常要用到乙個容器元素佔滿螢幕高度和寬度,然後再在這個容器元素裡放置其他元素。

寬度很簡單就是width:100%

但是高度呢,我們知道的是height:100%必須是在父元素的高度給定了的情況下才可以。

以前我的做法是用js獲取螢幕的高度,然後將其賦值給height,

螢幕高度在網頁中為:window.innerheight;

在微信小程式中則需要呼叫wx.getsysteminfo介面,然後通過setdata賦值

但是顯然通過js來進行的,效率上肯定不如cswww.cppcns.coms直接給定樣式。

於是我們使用另一種方法:

在網頁中設定body,oyedscgwnvhtml;

將body和html設定為100%,這樣我們就可以在他們的子元素中使用height:100%來使的我們的容器元素佔滿螢幕的高度啦。

www.cppcns.com但是在微信小程式中,是沒有dom物件的,但是我們看除錯工具可以看到在dom樹(我也不知程式設計客棧道怎麼叫了,就這麼叫吧)中,根節點是page,所以我們來試試使用page

果然,是可行的。高度佔滿了整個小程式的視窗。

於是我可以愉快的繼續寫我的小程式啦。

本文標題: 微信小程式中使元素佔滿整個螢幕高度實現方法

本文位址:

微信小程式中使用watch

設定 setwatcher page let lastkey key key.length 1 假設key my.name 此時nowdata data my data.my,lastkey name let watchfun watch v handler watch v 相容帶handler和不...

微信小程式測量手機螢幕大小

首先 獲取介面卡資訊,用getsysteminfosync 然後.windowheight 獲取高度 windowwindth 獲取寬度。var sysinfo wx.getsysteminfosync console.log sysinfo var winheight sysinfo.window...

微信小程式沒有select元素

從底部彈起的滾動選擇器,現支援五種選擇器,通過mode來區分,分別是普通選擇器,多列選擇器,時間選擇器,日期選擇器,省市區選擇器,預設是普通選擇器。這有哪五種呢,這包括了 普通選擇器 mode selector 多列選擇器 mode multiselector 時間選擇器 mode time 日期選...