微信小程序dom操作的替代思路实例分析

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

在尝试了几类情况后,发现部分情况下可以用{{}}变量绑定来实现效果。

比如:

一、实现view的显示和隐藏

在js中的data设置变量 bottomHidden1:"block";

然后在wxml中的view中设置<view > </view>;

在其它我们需要的地方使用bindtap等绑定事件,js中定义该事件的function,使用this.setData修改bottomHidden1变量为none或者block,实现对上文中的bottom1进行显示/隐藏控制

二、实现input中的 placeholder在获取焦点时清空,失去焦点时显示

1. 在js中,data中设置变量 priceHodler:"请输入价格",

2. 我们可以设置两个function控制变量priceHodler的值(此处添加了一种的方法实现输入框中删除图标的显示和消失,所以在data中设置了变量  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, }) },

附:输入框内容删除图标的功能实现(在js的data中也设置了变量 usdValue:null,):

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

3. 在wxml中添加这个input

<view> <input type="text" placeholder="{{priceHodler}}" placeholder-class="input-placeholder" value="{{usdValue}}" bindfocus="displayImg" bindblur="hiddenImg"/> </view> <label bindtap="doClearText"> <image src="https://www.jb51.net/img/search_close.png"></image> </label>

这里将js的data中的priceHodler绑定给了placeholder,clearImg绑定在image的display属性上,bindfocus="displayImg" bindblur="hiddenImg"会控制前两个变量的值的变化, bindtap="doClearText"会控制input的value的变化

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/c905f5193e42ffbb65998152ec12aeaa.html