微信小程式 獲取元素高度(獲取元素節點資訊)
微信小程式 獲取元素高度(獲取元素節點資訊)
如果高度要px單位的話:
let query = wx.createSelectorQuery();
query.select('.content').boundingClientRect(rect=>{
let height = rect.height;
console.log(height);
}).exec();
如果高度要rpx單位的話,那麼可以用寬高比換算獲得:(以下的750是該元素的寬度,單位是rpx的)
let query = wx.createSelectorQuery(); query.select('.content').boundingClientRect(rect=>{ let clientHeight = rect.height; let clientWidth = rect.width; let ratio = 750 / clientWidth; let height = clientHeight * ratio; console.log(height); }).exec();
關於獲取螢幕視口高度,請檢視該文章:《微信小程式 簡單獲取螢幕視口高度》
相關推薦
微信小程式----map元件實現(獲取定位城市天氣或者指定城市天氣資料)
效果圖 實現原理 採用高德地圖微信小程式開發API(getWeather),如果 city 屬性的值為空(或者沒有city屬性),預設返回定位位置的天氣資料;如果 city 不為空,則
微信小程式中使用Echarts(可非同步請求資料)
在微信小程式中使用Echarts,主要分為以下幾步: 1.首先要下載ecomfe/echarts-for-weixin專案,下載後將ec-canvas資料夾複製到小程式專案中,假設放在根目錄下utils資料夾中。 2.在要實現echarts圖的頁面引入echarts.js檔案,例如要在i
微信小程式 —— 考勤管理Demo(前後端及資料庫)
原始碼地址: 簡要介紹 這是一個微信小程式的考勤管理Demo,包括前後端及資料庫等內容。如有錯誤或建議,歡迎指出。 前端: 後端: 平臺: Node.js 資料庫: 初始賬戶:admin,初始密碼:ad
微信小程式自制提示框(具有輸入文字功能)
微信小程式自帶的API中的頁面互動功能,雖然提示功能非常全面,但是所有的互動API中是沒有可以自己在提示框中輸入文字的功能,那麼現在我們來自己做這樣的一個提示框(可以帶有輸入功能),在提示框輸入完內容之後,點選確定,可以將文字內容返回,點選取消則可以回到之前的狀態。(在這裡,
微信小程式(看文件寫例項五)微信小程式課堂寶APP實現獲取簽到列表
根據上篇博文,這篇主要實現獲取簽到列表邏輯。 獲得簽到列表主要有以下步驟: (1)查詢老師的ID (2)查詢老師的簽到記錄 (3)如果當前使用者是老師,直接顯示所有記錄,因為簽到記錄都是老師發起的,肯定每次都簽到 (4)如果當前使用者是學生,以老師的簽到列表作為長度,然後以ite
微信小程式詳細圖文教程-10分鐘完成微信小程式開發部署釋出(3元獲取騰訊雲伺服器帶小程式支援系統)
1、【高頻使用】 美團外賣 滴滴公交查詢 車來了 大眾點評+ 京東購物 摩拜單車 滴滴出行DiDi 攜程酒店機票火車票 2、【旅行】 驢媽媽門票預訂 飛常準查航班 海南航空微應用 南航e行 去哪兒出行 朋友家精選
微信小程式中如何修改陣列指定元素(或物件)
1、更改陣列中的值 可以改變陣列中某一個特定下標的值 //陣列 paraList:[{txt:'123',chose:false},{txt:'1234',chose:false}] //細節 l
微信小程式開發框架——WXSS(一)
WXSS語言決定了小程式頁面的各個元素在視覺上的展示,WXSS與CSS即為相試的、為了適合微信小程式開發WXSS對CSS進行相應的修改。 width:用來設定元素'寬度' / height:用來設定元素'高度 '/
微信小程式按鈕去邊框(button去邊框)
微信小程式中的button元件預設自帶邊框,而且我們常規的給button設定border: none;或者border: 0;並不能去掉邊框。 無論是內聯樣式還是外聯樣式表都不好使。這是因為微信小程式的button元件的邊框並不在button上,而是在button::after上
微信小程式——下拉重新整理(分頁)
1、先定義兩個變數: // 分頁,載入 hasMoreData:true, globalPage:0, 2、函式處理: 3、與後臺互動: 1)、在獲取列表的方法裡面,將下面兩個引數以及其他所需
微信小程式入門學習筆記(二)——阿里雲伺服器PHP MYSQL Apache配置
持續更新 持續學習 感謝原文大佬連結 https://www.linuxidc.com/Linux/2017-08/146220.htm 筆者在阿里雲上買了輕量應用伺服器 學生認證通過以下 便宜的 選擇的CentOS 7.3 64位 https://promot
微信小程式入門學習筆記(一)
入門級的跳轉格式: wx.redirectTo():不能返回上一層頁面 wx.navigateTo():用於頁面的跳轉 以上兩個不能跳轉於"tabBar" 因此跳轉"tabBar": wx.switchTab 感謝大佬的教程解答 了我的問題 以下附上原文連結 作者
微信小程式使用第三方庫(第三方js)問題
原文:https://blog.csdn.net/u012421719/article/details/56676801 比如很多人會有這樣的問題: 小程式怎樣引用第三方js呢?
檢測微信小程式是否被反編譯獲取原始碼
眾所周知,微信小程式的程式碼安全性很弱,很容易被別人反編譯獲取原始碼。我自己的小程式也被別人反編譯拿到原始碼還上線了,非常無語。 既然客戶端不好防範,服務端還是可以做點手腳的。 小程式的Referer是不可以更改的,從手機上發出的請求的Referer一般是這樣 https://servicewec
微信小程式開發文件(4)
微信小程式網路API 發起請求 上傳、下載 Websocket 檔案 資料快取 微信小程式媒體API 圖片 錄音 音訊播放控制 音樂播放控制 背景音訊播放管理 wx.createAudioContext(audioId) 視訊 wx.createVideoContext(videoId)
微信小程式二維碼(JAVA)
前言 最近在做小程式相關的專案,之前也在網上找過很多資料,遇到不少坑,和大家分享一下成果。 簡介 小程式獲取二維碼有官網三種介面: POST https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access
微信小程式——文字沉底居中(0基礎開發者,好痛苦)
這幾天想把一段文字置於頁面底部,試了好多方法都不可以,今天終於成功了上傳一下成功經歷。 最開始的方法,只是沉底,但是無法居中。 .section_text{ position: fixed; bottom: 30rpx; left: 0;
微信小程式自定義導航(相容各種手機)
瞭解小程式預設導航 如上圖所示,微信導航分為兩部分,第一個部分為statusBarHeight,劉海屏手機(iPhone X,小米8等)會比其他的手機高很多,第二部分為titleBarHeight,安卓和IOS的高度不同,但是IOS高度是一樣的,IOS高度是一樣的, 所以我們要實現一個相容不同手機的導
微信小程式學習筆記二(持續更新)---小程式網路請求封裝
寫小程式的你是否已經厭倦了傳送網路請求的wx.request?接著看吧。。。 一、目錄結構 在專案同級目錄下utils資料夾裡新建一個fetch.js檔案,(名字看自己喜好) 二、直接上程式碼 // 定義網路請求API地址 const baseURL = 'h
微信小程式學習筆記四(持續更新)---征服scroll-view下拉重新整理
貼圖 大概實現這種使用swiper做tab切換,資料頁面下拉重新整理的效果。 官方提供的scroll-view作為容器,如果在scroll-view使用onPullDownRefresh實現下拉重新整理,會存在頁面重新整理卡,並且重新整理會出現在tab之上,使