微信小程序dom操作的替代思路实例分析 - 行业资讯 - 肥雀云

本文实例讲述了微信小程序dom操作的替代思路。分享给大家供大家参考,具体如下:

微信小程序无法操作dom,这意味着之前js中的各种习惯方法必须换一种思路实现

在尝试了几类情况后,发现部分情况下可以用<代码>{{}}> 　　

比如: 　　

<强>一、实现视图的显示和隐藏

在js中的数据设置变量<代码> bottomHidden1:“块”,

然后在wxml中的视图中设置<代码> & lt;视图类=癰ottom1”比;& lt;/view>

在其它我们需要的地方使用<代码> bindtap> this.setData 修改bottomHidden1变量为没有或者,实现对上文中的bottom1进行显示/隐藏控制

<强>二,实现输入中的占位符在获取焦点时清空,失去焦点时显示

1。在javascript中,数据中设置变量,

2。我们可以设置两个函数控制变量priceHodler的值(此处添加了一种的方法实现输入框中删除图标的显示和消失,所以在数据中设置了变量,clearImg)

　　　　　　displayImg:函数(){ 　　var imgDisplay=翱椤? 　　var holderDisplay=" "; 　　this.setData ({ 　　clearImg: imgDisplay, 　　priceHodler: holderDisplay, 　　}) 　　}，　　hiddenImg:函数(){ 　　var imgHidden=懊挥小? 　　var holderHidden="请输入价格”; 　　this.setData ({ 　　clearImg: imgHidden, 　　priceHodler: holderHidden, 　　}) 　　}，　　　　之前　　　　

(在js的数据中也设置了变量<代码> usdValue:零> 　　　　　　doClearText:函数(){ 　　this.setData ({ 　　usdValue:空, 　　}) 　　}，　　　　之前　　　　

<强> 3。在wxml中添加这个输入

　　　　　　& lt;视图类=癷nput_view”比; 　　& lt;输入类型=拔谋尽闭嘉环?" {{priceHodler}}占位符类=癷nput-placeholder”类=" price_usd " id=" price_usd " name=" price_usd " value=" https://www.yisu.com/zixun/{{usdValue}}”bindfocus=癲isplayImg bindblur”=癶iddenImg”/比; 　　& lt;/view> 　　& lt;标签类=" clear_view " bindtap=癲oClearText”比; 　　& lt;图像类=" clear_img " src=" https://www.yisu.com/img/search_close.png "祝辞& lt;/image> 　　& lt;/label> 　　　　之前　　　　

这里将js的数据中的priceHodler绑定给了占位符,clearImg绑定在图像的显示属性上,<代码> bindfocus=癲isplayImg” <代码> bindblur=癶iddenImg”会控制前两个变量的值的变化,<代码> bindtap=" doClearText "> 　　

希望本文所述对大家微信小程序开发有所帮助。