您好,登錄后才能下訂單哦!
本文實例講述了微信小程序dom操作的替代思路。分享給大家供大家參考,具體如下:
微信小程序無法操作dom,這意味著之前js中的各種習(xí)慣方法必須換一種思路實現(xiàn)
在嘗試了幾類情況后,發(fā)現(xiàn)部分情況下可以用{{}}
變量綁定來實現(xiàn)效果。
比如:
一、實現(xiàn)view的顯示和隱藏
在js中的data設(shè)置變量 bottomHidden1:"block"
;
然后在wxml中的view中設(shè)置<view class="bottom1" > </view>
;
在其它我們需要的地方使用bindtap
等綁定事件,js中定義該事件的function,使用this.setData
修改bottomHidden1變量為none或者block,實現(xiàn)對上文中的bottom1進(jìn)行顯示/隱藏控制
二、實現(xiàn)input中的 placeholder在獲取焦點時清空,失去焦點時顯示
1. 在js中,data中設(shè)置變量 priceHodler:"請輸入價格",
2. 我們可以設(shè)置兩個function控制變量priceHodler的值(此處添加了一種的方法實現(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 = "請輸入價格"; this.setData({ clearImg: imgHidden, priceHodler: holderHidden, }) },
附:輸入框內(nèi)容刪除圖標(biāo)的功能實現(xiàn)(在js的data中也設(shè)置了變量 usdValue:null
,):
doClearText:function(){ this.setData({ usdValue: null, }) },
3. 在wxml中添加這個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 class="clear_img" src="../img/search_close.png"></image> </label>
這里將js的data中的priceHodler綁定給了placeholder,clearImg綁定在image的display屬性上,bindfocus="displayImg"
bindblur="hiddenImg"
會控制前兩個變量的值的變化, bindtap="doClearText"
會控制input的value的變化
希望本文所述對大家微信小程序開發(fā)有所幫助。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。