How to dynamically set placeholder prompt text and button selection/cancel status in WeChat applet-Mini Program Development-php.cn

How to dynamically set placeholder prompt text and button selection/cancel status in WeChat applet

不言

Release： 2018-06-23 14:25:16

Original

4730 people have browsed it

This article mainly introduces the method of WeChat applet to dynamically set placeholder prompt text and button selection/cancel state, involving event binding and related operation skills of dynamically setting attribute data of this.setData. Friends in need can refer to the following

The example of this article describes the method of WeChat applet to dynamically set placeholder prompt text and button selection and cancellation status. Share it with everyone for your reference, the details are as follows:

Rendering display

By binding the click event placeholder method, obtaindata-num value, use js to determine what num is equal to, and then use class="{{num==X?'active':''}}"expression to determine which label In the selected state (that is, white text on a blue background);

js sets the dynamic value of the placeholder in the input input box by obtaining data-key

Content in wxml:

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

Copy after login

Content in js:

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

Copy after login

The above is The entire content of this article is hoped to be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

A brief introduction to the tabs in the WeChat mini program

The WeChat mini program implements clicking buttons to move the view Label position function

WeChat applet realizes the function of clicking the button to change the font color

The above is the detailed content of How to dynamically set placeholder prompt text and button selection/cancel status in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!