微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法


Posted in Javascript onDecember 14, 2017

本文实例讲述了微信小程序实现动态设置placeholder提示文字及按钮选中取消状态的方法。分享给大家供大家参考,具体如下:

效果图展示

微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法 微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法 微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法

通过绑定点击事件placeholder方法,获取data-num的值,通过js判断num等于几,然后通过class="{{num==X?'active':''}}"表达式判断哪个标签处于选中状态(即蓝底白字);

js通过获取data-key,设置input输入框中placeholder的动态值

wxml里的内容:

<view class="retrieve-list">
  <div class="option">
    <span bindtap="placeholder" data-num='1' data-key='' data-val='' class="{{num==1?'active':''}}">全部</span>
    <span bindtap="placeholder" data-num='2' data-key='标题' data-val='ti' class="{{num==2?'active':''}}">标题</span>
    <span bindtap="placeholder" data-num='3' data-key='摘要' data-val='ab' class="{{num==3?'active':''}}">摘要</span>
    <span bindtap="placeholder" data-num='4' data-key='申请人' data-val='ap' class="{{num==4?'active':''}}">申请人</span>
    <span bindtap="placeholder" data-num='5' data-key='申请号' data-val='an' class="{{num==5?'active':''}}">申请号</span>
    <span bindtap="placeholder" data-num='6' data-key='代理人' data-val='ag' class="{{num==6?'active':''}}">代理人</span>
  </div>
  <div class="option">
    <span bindtap="placeholder" data-num='7' data-key='代理机构' data-val='ac' class="{{num==7?'active':''}}">代理机构</span>
    <span bindtap="placeholder" data-num='8' data-key='公开号' data-val='pn' class="{{num==8?'active':''}}">公开号</span>
    <span bindtap="placeholder" data-num='9' data-key='发明人' data-val='in' class="{{num==9?'active':''}}">发明人</span>
    <span bindtap="placeholder" data-num='10' data-key='专利权人' data-val='pa' class="{{num==10?'active':''}}">专利权人</span>
  </div>
</view>

js里的内容:

var app = getApp()
Page({
 data: {
  placeholder:'请输入',
  ph:'',
  num:1,
  key:'',
 },
 placeholder:function(e){
  var num = e.currentTarget.dataset.num
  this.setData({
   ph: this.data.placeholder+e.currentTarget.dataset.key
  })
  this.setData({
   num: num
  })
})

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
js上传图片及预览功能实例分析
Apr 24 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 Javascript
ES6/JavaScript使用技巧分享
Dec 14 #Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 #Javascript
浅析JS抽象工厂模式
Dec 14 #Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 #Javascript
利用Javascript开发一个二维周视图日历
Dec 14 #Javascript
浅谈es6 javascript的map数据结构
Dec 14 #Javascript
利用Javascript实现一套自定义事件机制
Dec 14 #Javascript
You might like
PHP产生随机字符串函数
2006/12/06 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
nginx 设置多个站跨域
2021/03/09 Servers
firefo xml 读写实现js代码
2009/06/11 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
详解jQuery中的事件
2016/12/14 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
Python Pandas找到缺失值的位置方法
2018/04/12 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
python调用支付宝支付接口流程
2019/08/15 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
学python最电脑配置有要求么
2020/07/05 Python
Django实现随机图形验证码的示例
2020/10/15 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
自我评价范文分享
2014/01/04 职场文书
上班离岗检讨书
2014/01/27 职场文书
业务部主管岗位职责
2014/01/29 职场文书
2014年清明节寄语
2014/04/03 职场文书
初中新生军训方案
2014/05/13 职场文书
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis