Comment définir dynamiquement le texte d'invite d'espace réservé et le statut de sélection/annulation des boutons dans l'applet WeChat

不言
Libérer: 2018-06-23 14:25:16
original
4693 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

in js Content :

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 représente l'intégralité du contenu de cet article .J'espère que cela sera utile à l'étude de tout le monde. Plus de contenu connexe Veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Une brève introduction aux onglets du mini-programme WeChat

Le mini-programme WeChat implémente le clic boutons pour déplacer la vue Fonction de position de l'étiquette

L'applet WeChat réalise la fonction de cliquer sur le bouton pour changer la couleur de la police

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal