微信小程序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 table鼠标经过变色代码
Sep 27 Javascript
分享网页检测摇一摇实例代码
Jan 14 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
微信小程序webview 脚手架使用详解
Jul 22 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
js实现微信聊天效果
Aug 09 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
药剂学专业应届生自荐信
2013/09/29 职场文书
商务英语专业应届毕业生求职信
2013/10/28 职场文书
应届毕业生的自我鉴定
2013/11/13 职场文书
自我鉴定怎么写
2014/01/12 职场文书
八项规定整改方案
2014/02/21 职场文书
工作建议书范文
2014/05/13 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python
python缺失值填充方法示例代码
2022/12/24 Python