微信小程序实现动态设置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解密入门之凭直觉解
Jun 25 Javascript
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
Node.js API详解之 console模块用法详解
May 12 Javascript
vue 子组件和父组件传值的示例
Sep 11 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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
多文件上传的例子
2006/10/09 PHP
JS实现php的伪分页
2008/05/25 PHP
ajax实现无刷新分页(php)
2010/07/18 PHP
CURL状态码列表(详细)
2013/06/27 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php读取3389的脚本
2014/05/06 PHP
php通过session防url攻击方法
2014/12/10 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
React-router4路由监听的实现
2018/08/07 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
工厂会计员职责
2014/02/06 职场文书
交通安全横幅标语
2014/10/07 职场文书
化验员岗位职责
2015/02/14 职场文书
学校就业保障协议书
2019/06/24 职场文书
golang 实现Location跳转方式
2021/05/02 Golang
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
Go语言特点及基本数据类型使用详解
2022/03/21 Golang
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang
Mysql中mvcc各场景理解应用
2022/08/05 MySQL