微信小程序实现动态设置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 相关文章推荐
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
简单理解vue中实例属性vm.$els
Dec 01 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
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
php4的session功能评述(二)
2006/10/09 PHP
PHP中,文件上传
2006/12/06 PHP
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
Python 字典dict使用介绍
2014/11/30 Python
python读取word文档的方法
2015/05/09 Python
python实现获取Ip归属地等信息
2016/08/27 Python
Python实现的密码强度检测器示例
2017/08/23 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
python如何实现word批量转HTML
2020/09/30 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
硕士生找工作求职信
2014/07/05 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
2016年清明节寄语
2015/12/04 职场文书
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis