微信小程式實作動態設定placeholder提示文字及按鈕選取/取消狀態的方法-小程式開發-PHP中文網

首頁

微信小程式

小程式開發

微信小程式實作動態設定placeholder提示文字及按鈕選取/取消狀態的方法

Jun 23, 2018 pm 02:25 PM

placeholder 取消微信小程式按鈕狀態選取

這篇文章主要介紹了微信小程式實現動態設定placeholder提示文字及按鈕選取/取消狀態的方法,涉及事件綁定及this.setData動態設定屬性資料的相關操作技巧,需要的朋友可以參考下

本文實例講述了微信小程式實作動態設定placeholder提示文字及按鈕選取取消狀態的方法。分享給大家供大家參考，如下：

效果圖展示

透過綁定點選事件placeholder方法，取得data-num的值，透過js判斷num等於幾，然後透過class="{{num==X?'active':''}}"表達式判斷哪個標籤處於選取狀態（即藍底白字）；

js透過取得data-key，設定input輸入方塊中placeholder的動態值

wxml裡的內容：

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

登入後複製

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

登入後複製

##以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！