本文實例講述了微信小程序?qū)崿F(xiàn)動態(tài)改變view標簽寬度和高度的方法。分享給大家供大家參考,具體如下:
1、效果展示
2、關(guān)鍵代碼
index.wxml文件
<view class="view" style="width:{{view.Width}}px;height:{{view.Height}}px;">我是view標簽,我現(xiàn)在的寬度是{{view.Width}}px,高度是{{view.Height}}px</view><input placeholder="輸入view標簽的寬度" bindinput="viewWidth"></input><input placeholder="輸入view標簽的高度" bindinput="viewHeight"></input>
此處設(shè)置的style="width:{{view.Width}}px;height:{{view.Height}}px;"
可通過事件響應(yīng)動態(tài)改變數(shù)值,進而改變view組件的寬高樣式。
index.js文件
var pageData={}pageData.data={ view:{ Width:100, Height:100 }}pageData['viewWidth']=function(e){console.log(e); this.setData({ view:{ Width:e.detail.value, Height:this.data.view.Height } })}pageData['viewHeight']=function(e){ this.setData({ view:{ Width:this.data.view.Width, Height:e.detail.value } })}Page(pageData)
PS:類似前面文章//www.survivalescaperooms.com/article/129725.htm介紹過的,可在事件處理函數(shù)中添加console.log(e);
,在控制臺中即可觀察到是由e.detail.value
獲取寬與高改變數(shù)值。
3、源代碼點擊此處本站下載。
希望本文所述對大家微信小程序開發(fā)有所幫助。
新聞熱點
疑難解答