微信小程序实现动态设置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
  })
})

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