Comment définir dynamiquement le texte d'invite d'un espace réservé à l'aide de l'applet WeChat-js tutoriel-php.cn

Comment définir dynamiquement le texte d'invite d'un espace réservé à l'aide de l'applet WeChat

亚连

Libérer： 2018-06-20 16:35:28

original

3892 Les gens l'ont consulté

Cet article présente principalement la méthode de l'applet WeChat pour définir dynamiquement le texte d'invite de l'espace réservé et l'état de sélection/annulation du bouton, impliquant la liaison d'événements et les compétences opérationnelles associées pour définir dynamiquement les données d'attribut avec this.setData. Les amis dans le besoin peuvent se référer à ce qui suit.

L'exemple de cet article décrit la méthode de l'applet WeChat pour définir dynamiquement le texte d'invite d'espace réservé, la sélection des boutons et l'état d'annulation. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Affichage du rendu

En liant la méthode d'espace réservé de l'événement de clic , obtenezdata-num, utilisez js pour déterminer à quoi num est égal, puis utilisez l'expression pour déterminer quelle balise est sélectionnée (c'est-à-dire un texte blanc sur fond bleu) ; class="{{num==X?'active':''}}"

js obtient

data-key, définissez la valeur dynamique de l'espace réservé dans la zone de saisie

Contenu en 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>

Copier après la connexion

Contenu en 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
  })
})

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.