亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序dom操作的替代思路實(shí)例分析

 更新時(shí)間：2018年12月06日 11:16:41   作者：yytoo2  
這篇文章主要介紹了微信小程序dom操作的替代思路,結(jié)合實(shí)例形式分析了微信小程序通過(guò)事件響應(yīng)、動(dòng)態(tài)操作元素屬性來(lái)實(shí)現(xiàn)dom操作效果,需要的朋友可以參考下

本文實(shí)例講述了微信小程序dom操作的替代思路。分享給大家供大家參考，具體如下：

微信小程序無(wú)法操作dom，這意味著之前js中的各種習(xí)慣方法必須換一種思路實(shí)現(xiàn)

在嘗試了幾類情況后，發(fā)現(xiàn)部分情況下可以用{{}}變量綁定來(lái)實(shí)現(xiàn)效果。

比如：

一、實(shí)現(xiàn)view的顯示和隱藏

在js中的data設(shè)置變量 bottomHidden1:"block"；

然后在wxml中的view中設(shè)置<view class="bottom1" style="display:{{bottomHidden1}}" > </view>；

在其它我們需要的地方使用bindtap等綁定事件，js中定義該事件的function，使用this.setData修改bottomHidden1變量為none或者block，實(shí)現(xiàn)對(duì)上文中的bottom1進(jìn)行顯示/隱藏控制

二、實(shí)現(xiàn)input中的 placeholder在獲取焦點(diǎn)時(shí)清空，失去焦點(diǎn)時(shí)顯示

1. 在js中，data中設(shè)置變量 priceHodler:"請(qǐng)輸入價(jià)格",

2. 我們可以設(shè)置兩個(gè)function控制變量priceHodler的值(此處添加了一種的方法實(shí)現(xiàn)輸入框中刪除圖標(biāo)的顯示和消失，所以在data中設(shè)置了變量  clearImg）

 displayImg:function(){
  var imgDisplay="block";
  var holderDisplay ="";
  this.setData({
   clearImg: imgDisplay,
   priceHodler: holderDisplay,
  })
 },
 hiddenImg:function(){
  var imgHidden = "none";
  var holderHidden = "請(qǐng)輸入價(jià)格";
  this.setData({
   clearImg: imgHidden,
   priceHodler: holderHidden,
  })
 },

附：輸入框內(nèi)容刪除圖標(biāo)的功能實(shí)現(xiàn)（在js的data中也設(shè)置了變量 usdValue:null,）：

 doClearText:function(){
  this.setData({
   usdValue: null,
  })
 },

3. 在wxml中添加這個(gè)input

<view class="input_view">
  <input type="text" placeholder="{{priceHodler}}" placeholder-class="input-placeholder" class="price_usd" id="price_usd" name="price_usd" value="{{usdValue}}" bindfocus="displayImg" bindblur="hiddenImg"/>
</view>
<label class="clear_view" bindtap="doClearText">
  <image style="display:{{clearImg}};" class="clear_img" src="../img/search_close.png"></image>
</label>

這里將js的data中的priceHodler綁定給了placeholder，clearImg綁定在image的display屬性上，bindfocus="displayImg" bindblur="hiddenImg"會(huì)控制前兩個(gè)變量的值的變化， bindtap="doClearText"會(huì)控制input的value的變化

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

相關(guān)文章

最新評(píng)論