WeChat アプレットを使用してプレースホルダー プロンプト テキストを動的に設定する方法

この記事では主に、プレースホルダープロンプトテキストとボタンの選択/キャンセル状態を動的に設定するWeChatアプレットの方法を紹介します。これには、イベントバインディングと、this.setDataで属性データを動的に設定する関連操作スキルが含まれます。必要な友人はそれを参照してください

。この記事では、プレースホルダー プロンプト テキストとボタンの選択とキャンセルのステータスを動的に設定する WeChat アプレットの方法の例について説明しています。参考までに皆さんに共有してください。詳細は以下の通りです:

レンダリング表示

クリックイベントのプレースホルダーメソッドをバインドすることで、data-numの値を取得し、numがどのくらいに等しいかを判断しますjs を介して、それを class="{{num==X?'active':''}}" で表現します。式は、どのタグが選択されるかを決定します (つまり、青い背景に白いテキスト)。

js は、data-key

を取得することによって、入力ボックス内のプレースホルダーの動的値を設定します。 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>

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

以上は、皆さんのためにまとめたものです。今後皆さんのお役に立てれば幸いです。

関連記事:

jsで双方向バインディングを実装する方法

キャンバスで生成した画像をjsで保存する方法

jsを使用して再割り当てを実装する方法

で検証コードを実装する方法JS Countdown

nodejsを使ってmongodbのfill、delete、modify、checkモジュールを操作する方法

socket.ioを使ったチャットルームの実装方法

でのドラッグアンドドロップ機能の実装方法AngularJS

AngularJS関数でジャンプを実装する方法

jQueryを使用して通常の携帯電話番号認証入力を実装する方法

以上がWeChat アプレットを使用してプレースホルダー プロンプト テキストを動的に設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。