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


Posted in Javascript onDecember 06, 2018

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

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

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

比如:

一、实现view的显示和隐藏

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

然后在wxml中的view中设置<view class="bottom1" style="display:{{bottomHidden1}}" > </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 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"会控制前两个变量的值的变化, bindtap="doClearText"会控制input的value的变化

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

Javascript 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
jQuery的三种$()
Dec 30 Javascript
jQuery find和children方法使用
Jan 31 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 #Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 #Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 #Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 #Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 #Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 #Javascript
JavaScript中引用vs复制示例详析
Dec 06 #Javascript
You might like
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
PHP中的extract的作用分析
2008/04/09 PHP
PHP 学习路线与时间表
2010/02/21 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
Bootstrap table使用方法汇总
2017/11/17 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
python 基于wx实现音乐播放
2020/11/24 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
关于毕业的中学校园广播稿
2014/01/26 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
《燕子》教学反思
2014/02/18 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
村创先争优活动总结
2014/08/28 职场文书
团组织关系介绍信
2019/06/24 职场文书