Heim >Web-Frontend >js-Tutorial >So legen Sie mit dem WeChat-Applet dynamisch Platzhalter-Eingabeaufforderungstext fest

So legen Sie mit dem WeChat-Applet dynamisch Platzhalter-Eingabeaufforderungstext fest

亚连
亚连Original
2018-06-20 16:35:283920Durchsuche

In diesem Artikel wird hauptsächlich die Methode des WeChat-Applets zum dynamischen Festlegen von Platzhalter-Eingabeaufforderungstext und Schaltflächenauswahl-/Abbruchstatus vorgestellt, einschließlich der Ereignisbindung und der damit verbundenen Betriebsfähigkeiten zum dynamischen Festlegen von Attributdaten mit this.setData. Freunde in Not können sich auf Folgendes beziehen

Das Beispiel in diesem Artikel beschreibt die Methode des WeChat-Applets, um Platzhalter-Eingabeaufforderungstext und Schaltflächenauswahl- und Abbruchstatus dynamisch festzulegen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Rendering-Anzeige

Durch Bindung der Klickereignis-Platzhaltermethode , erhaltendata-num verwenden Sie js, um zu bestimmen, was num entspricht, und verwenden Sie dann den Ausdruck , um zu bestimmen, welches Tag ausgewählt ist (d. h. weißer Text auf blauem Hintergrund); class="{{num==X?'active':''}}"

js erhält

Datenschlüssel, legt den dynamischen Wert des Platzhalters im Eingabeeingabefeld fest

Inhalt 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>

Inhalt 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
  })
})

Das Obige habe ich zusammengestellt. Für alle hoffe ich, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie eine bidirektionale Bindung in js

So speichern Sie auf Leinwand generierte Bilder in js

So implementieren Sie eine Neuzuweisung mit js

So implementieren Sie den Countdown für den Bestätigungscode in JS

Anleitung Verwenden Sie nodejs. Betreiben Sie das Füll-, Lösch-, Änderungs- und Prüfmodul von mongodb

So implementieren Sie einen Chatroom mit socket.io

Anleitung Implementieren Sie die Drag-and-Drop-Funktion in AngularJS

So implementieren Sie die Sprungfunktion in AngularJS

So verwenden Sie jQuery, um eine normale Mobiltelefonnummer zu implementieren Verifizierungseingabe

Das obige ist der detaillierte Inhalt vonSo legen Sie mit dem WeChat-Applet dynamisch Platzhalter-Eingabeaufforderungstext fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn