微信小程序實現動態改變view標簽寬度和高度的方法

本文主要介紹微信小程序實現動態改變view標簽寬度和高度的方法,涉及微信小程序事件響應及使用setData針對data數據動態操作相關實現技巧,希望能幫助到大家。

 

1、效果展示

2、關鍵代碼

index.wxml文件

1 2 3 4

<view class="view" style="width:{{view.Width}}px;height:{{view.Height}}px;" >我是view標簽，我現在的寬度是{{view.Width}}px,高度是{{view.Height}}px</view> <input placeholder="輸入view標簽的寬度" bindinput="viewWidth"></input> <input placeholder="輸入view標簽的高度" bindinput="viewHeight"></input>

此處設置的style="width:{{view.Width}}px;height:{{view.Height}}px;"可通過事件響應動態改變數值，進而改變view組件的寬高樣式。

index.js文件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

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)

以上內容就是微信小程序實現動態改變view標簽寬度和高度的方法，希望能幫助到大家。

相關推薦：

微信小程序中關於movable-view移動圖片與雙指縮放的實例詳解

jQuery使用uploadView如何實現圖片預覽上傳功能的實例

淺談View組件實例詳解

以上就是微信小程序實現動態改變view標簽寬度和高度的方法的詳細內容，更多請關注php中文網其它相關文章！