微信小程序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 相关文章推荐
在html页面中包含共享页面的方法
Oct 24 Javascript
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
跟混乱的页面弹窗说再见
Apr 11 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 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的面试题集
2006/11/19 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
js 函数调用模式小结
2011/12/26 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
canvas绘制七巧板
2017/02/03 Javascript
EsLint入门学习教程
2017/02/17 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
基于python实现学生信息管理系统
2019/11/22 Python
Python实现密码薄文件读写操作
2019/12/16 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
亮化工程实施方案
2014/03/17 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
MySQL数据库事务的四大特性
2022/04/20 MySQL