微信小程式怎麼動態獲取view的高度以及獲取view到頁面頂部的距離
首先給你的xml物件一個id:
<view class="usermotto" style="height:213px;" id='mjltest'/>
然後在js裡,用一個SelectorQuery來選擇對應id的節點(注意id前面要加一個#號),就可以獲取對應節點的屬性,包括高度。
//建立節點選擇器 var query = wx.createSelectorQuery(); //選擇id query.select('#mjltest').boundingClientRect() query.exec(function (res) { //res就是 所有標籤為mjltest的元素的資訊 的陣列 console.log(res); //取高度 console.log(res[0].height); })
可以看到取到的高度和其他資訊。
小程式官方文件api說明:https://developers.weixin.qq.com/miniprogram/dev/api/wx.createSelectorQuery.html
相關推薦
微信小程式動態獲取當前時間顯示到頁面
index/index.wxml <!--index.wxml--> <view class="container"> <!-- 建立按鈕,為按鈕繫結函式 --> <button bindtap="getTime">點選獲取當前時間<
微信小程式 動態新增view元件
在web中,我們動態新增DOM,可以用jQuery的方法,很簡單。在微信小程式中怎麼實現下面這麼需求。 其中,里程數代表上一行到這一行地方的距離(這個不重要);要實現的就是點選增加途徑地,就多一行,刪除途徑地,就少一行。 分析:新增的和刪除的是同樣的結構,只是數量不一樣,所以考慮迴
微信小程式動態設定/獲取值與屬性
這兩天在公司做微信小程式,也是剛剛入手,遇到了很多的坑,和大家分享一下。 首先微信小程式不像普通的頁面一樣,獲取屬性啊什麼的需要你去操作節點,在小程式裡你就是去對這個頁面的data進行一系列的操作,然後通過data來反映到頁面上。 1.設定data與使用dat
微信小程式中資料的儲存和獲取
/儲存資料 try { wx.setStorageSync('key',this.data.radioCheckVal2) //key表示data中的引數
微信小程式自定義屬性設定和獲取(data-)
自定義屬性語法以data-開頭: <block wx:for='{{post_key}}' wx:key="key" wx:for-item='item'> <view catchtap='onPostTap' data-postid="{{item.postId}}
微信小程式動態生成儲存二維碼
起源:最近小程式需要涉及到一些推廣方面的功能,所以要寫一個動態生成二維碼使用者進行下載分享,寫完之後受益良多,特此來分享一下; 一.微信小程式動態生成儲存二維碼 wxml: <canvas style="width: 350rpx;height
微信小程式 form和input組合使用獲取value為空的原因
<form bindsubmit='replayComment'> <view class='reply'> <input placeholder='
微信小程式動態實現小選單
微信小程式動態實現上圖所示小選單: 設定選單資料來源: Page({ /** * 頁面的初始資料 */ data: { menuList: [ [{ name: '選單1', url:
微信小程式 動態繫結 style 樣式 和class
<view class="changeImageView" style="display:{{displayPhoto}}" > <view class="operbtn">測試</view> </view> <vi
微信小程式動態生成二維碼
預覽效果如下 思路 1.先引用qrcode.js(自己從網上下載) 2.設定二維碼大小 3. 繪製二維碼 4. 提交按鈕重新整理獲取二維碼 wxml wxss js樣式就引入onLoad裡的內容,其他的和上部分思路里的一樣,直接加入裡面就好了
【微信小程式教程】點選按鈕修改view標籤背景顏色
1、效果展示 2、操作步驟: 資料繫結view樣式背景屬性值通過邏輯檔案設定該背景屬性初始值通過點選按鈕修改背景屬性值3、關鍵程式碼 4、原始碼獲取方式 百度雲連結:http://pan.baid
微信小程式 動態設定背景
wx.setBackgroundColor(Object object) 支援版本 >= 2.1.0 動態設定視窗的背景色 wx.setBackgroundColor({ backgroundColor: '#ffffff', // 視窗的背景色為白色 }
微信小程式例子——使用form表單獲取輸入框資料
1、效果展示 2、關鍵程式碼 index.wxml 使用者名稱: 密碼: 登入 重置 {{tip}}{{userName}}{{psw}} index.js
微信小程式傳送POST請求時後臺獲取不到傳輸的資料
在使用微信小程式傳送POST請求時,請求成功了,但是後臺獲取不到前端傳遞的資料; 按照官方文件,請求程式如下 var data={ code:res.code,
微信小程式掃碼的程式碼及獲取二維碼的url地址
<view bindtap="scanCode">點選掃碼</view> scanCode: function (options) { var that = this;
微信小程式—動態顯示專案倒計時(格式:6天6小時58分鐘39秒)
1、展示的效果如下 2、wxml程式碼: <!--倒計時 --> <text wx:if="{{clock!=''}}">僅剩{{clock}}</text> <text wx:if="{{clock==''}}">已
微信小程式根據當前所在地址來獲取城市名稱
場景: html部分: <view class="index-top-left incursor" bindtap="get_user_address"> <span style="font-size
微信小程式 動態修改顏色
在h5中可以用js根據id啊、class啊等等找到控制元件,然後.css 但是在小程式中沒有,小程式是資料繫結的模式,style也可以這樣寫 1,在data中定義變數color
微信小程式 --動態設定標題欄的文字
tabBar配置好以後,發現每個頁面的標題欄的文字都是一樣,這樣不符合需求哇。 開始把APP.JSON裡面的window相關內容複製到對應頁面,然後在修改文字標題, 但是沒有效果呀。 經過一番嘗試查詢測試。。。 原來是在對應頁面的JSON檔案了直接加入一句話就行了呀。 例如
微信小程式----動態設定導航欄標題
場景 當從一個分類列表頁面進入到一個詳情頁面的時候,由於這個詳情頁面是公用的,為了區分頁面,就會設定該頁面的導航用以區分。就需要開發者在頁面載入的時候進行動態設定導航標題! 實現AP