微信小程序如何實(shí)現(xiàn)動(dòng)態(tài)改變view標(biāo)簽寬度和高度

這篇文章主要為大家展示了“微信小程序如何實(shí)現(xiàn)動(dòng)態(tài)改變view標(biāo)簽寬度和高度”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“微信小程序如何實(shí)現(xiàn)動(dòng)態(tài)改變view標(biāo)簽寬度和高度”這篇文章吧。

具體如下：

1、效果展示

2、關(guān)鍵代碼

index.wxml文件

<view class="view" 
>我是view標(biāo)簽，我現(xiàn)在的寬度是{{view.Width}}px,高度是{{view.Height}}px</view>
<input placeholder="輸入view標(biāo)簽的寬度" bindinput="viewWidth"></input>
<input placeholder="輸入view標(biāo)簽的高度" bindinput="viewHeight"></input>

此處設(shè)置的可通過(guò)事件響應(yīng)動(dòng)態(tài)改變數(shù)值，進(jìn)而改變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)

以上是“微信小程序如何實(shí)現(xiàn)動(dòng)態(tài)改變view標(biāo)簽寬度和高度”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！