快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)動(dòng)態(tài)改變view標(biāo)簽寬度和高度的方法【附demo源碼下載】

更新時(shí)間：2017年12月05日 15:22:58 作者：FutrueJet

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)改變view標(biāo)簽寬度和高度的方法,涉及微信小程序事件響應(yīng)及使用setData針對(duì)data數(shù)據(jù)動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)改變view標(biāo)簽寬度和高度的方法。分享給大家供大家參考，具體如下：

1、效果展示

2、關(guān)鍵代碼

index.wxml文件

<view class="view" style="width:{{view.Width}}px;height:{{view.Height}}px;"
>我是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è)置的style="width:{{view.Width}}px;height:{{view.Height}}px;"可通過(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)

PS：類似前面文章http://m.fzitv.net/article/129725.htm介紹過(guò)的，可在事件處理函數(shù)中添加console.log(e);，在控制臺(tái)中即可觀察到是由e.detail.value獲取寬與高改變數(shù)值。

3、源代碼點(diǎn)擊此處本站下載。

希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。

您可能感興趣的文章:

相關(guān)文章

js圖片模糊切換顯示特效的方法
這篇文章主要介紹了js圖片模糊切換顯示特效的方法,涉及js操作圖片特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
非常全面的12種js數(shù)組去重的方法
數(shù)組的去重方法,其實(shí)無(wú)論實(shí)在實(shí)際項(xiàng)目還是在面試中都會(huì)有用到的,下面這篇文章主要給大家介紹了非常全面的12種js數(shù)組去重的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
JavaScript操作XML實(shí)例代碼（獲取新聞標(biāo)題并分頁(yè)，并分頁(yè)）
XML 代碼部分這是一個(gè)新聞的XML 文件，如果 NBody部分包含 XML 和Html 不可識(shí)別部分，就包含在DATA 表示附中。
2010-05-05
javascript 獲取鏈接文件地址中第一個(gè)斜線內(nèi)的正則表達(dá)式
我想得到“windows”，請(qǐng)問(wèn)用正則表達(dá)式怎么寫？
2009-06-06
Mozilla中顯示textarea中選擇的文字
Mozilla中顯示textarea中選擇的文字...
2006-09-09
Javascript表單序列化原理及實(shí)現(xiàn)代碼詳解
這篇文章主要介紹了Javascript表單序列化原理及實(shí)現(xiàn)代碼詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-10-10
js實(shí)現(xiàn)登陸與注冊(cè)功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)登陸與注冊(cè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
mock.js實(shí)現(xiàn)模擬生成假數(shù)據(jù)功能示例
這篇文章主要介紹了mock.js實(shí)現(xiàn)模擬生成假數(shù)據(jù)功能,結(jié)合實(shí)例形式分析了mock.js插件生成模擬數(shù)據(jù)的相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
微信小程序?qū)崿F(xiàn)單選選項(xiàng)卡切換效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)單選選項(xiàng)卡切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-02-02
js中for in語(yǔ)句的用法講解
這篇文章主要介紹了js中for in語(yǔ)句的用法講解,本文用多個(gè)實(shí)例講解了for in語(yǔ)句的用法及適合場(chǎng)景,需要的朋友可以參考下
2015-04-04