微信小程序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 相关文章推荐
为jQuery增加join方法的实现代码
Nov 28 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
js时间查询插件使用详解
Apr 07 Javascript
详解Angular 4.x Injector
May 04 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 Javascript
详解datagrid使用方法(重要)
Nov 06 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
WHOIS类的修改版
2006/10/09 PHP
PHP循环语句笔记(foreach,list)
2011/11/29 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
php魔术变量用法实例详解
2014/11/13 PHP
PHP会话处理的10个函数
2015/08/11 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
大学生自荐书范文
2013/12/10 职场文书
优秀教师申报材料
2014/12/16 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
丧事答谢词
2015/01/05 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
Spring Bean是如何初始化的详解
2022/03/22 Java/Android