微信小程序dom操作的替代思路实例分析-创新互联
本文实例讲述了微信小程序dom操作的替代思路。分享给大家供大家参考,具体如下:
创新互联专注于企业成都全网营销、网站重做改版、桐庐网站定制设计、自适应品牌网站建设、H5开发、商城建设、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为桐庐等各大城市提供网站开发制作服务。微信小程序无法操作dom,这意味着之前js中的各种习惯方法必须换一种思路实现
在尝试了几类情况后,发现部分情况下可以用{{}}
变量绑定来实现效果。
比如:
一、实现view的显示和隐藏
在js中的data设置变量 bottomHidden1:"block"
;
然后在wxml中的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, }) },
当前标题:微信小程序dom操作的替代思路实例分析-创新互联
文章出自:http://azwzsj.com/article/docjid.html