微信小程序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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 Javascript
Node.js fs模块原理及常见用途
Oct 22 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
使用eAccelerator加密PHP程序
2008/10/03 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
js读取cookie方法总结
2014/10/31 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
vue中监听返回键问题
2019/08/28 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
Python如何对齐字符串
2020/07/30 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
房产公证书格式
2015/01/26 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
56句经典英文座右铭
2019/08/09 职场文书
python基于turtle绘制几何图形
2021/06/15 Python
swagger如何返回map字段注释
2021/07/03 Java/Android
python实现会员管理系统
2022/03/18 Python
Hive常用日期格式转换语法
2022/06/25 数据库