微信小程序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 相关文章推荐
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
JavaScript随机数的组合问题案例分析
May 16 Javascript
javascript实现京东快递单号的查询效果
Nov 30 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
php 静态变量的初始化
2009/11/15 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
tab栏切换原理
2017/03/22 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
python通过http下载文件的方法详解
2019/07/26 Python
python实现静态服务器
2019/09/05 Python
python右对齐的实例方法
2020/07/05 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
面向对象编程的优势是什么
2015/12/17 面试题
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
2014年协会工作总结
2014/11/22 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
解析MySQL binlog
2021/06/11 MySQL
python中24小时制转换为12小时制的方法
2021/06/18 Python