欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)動態(tài)設(shè)置placeholder提示文字及按鈕選中/取消狀態(tài)的方法

 更新時間:2017年12月14日 14:37:17   作者:bounsail1986  
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)動態(tài)設(shè)置placeholder提示文字及按鈕選中/取消狀態(tài)的方法,涉及事件綁定及this.setData動態(tài)設(shè)置屬性數(shù)據(jù)的相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了微信小程序?qū)崿F(xiàn)動態(tài)設(shè)置placeholder提示文字及按鈕選中取消狀態(tài)的方法。分享給大家供大家參考,具體如下:

效果圖展示

  

通過綁定點擊事件placeholder方法,獲取data-num的值,通過js判斷num等于幾,然后通過class="{{num==X?'active':''}}"表達(dá)式判斷哪個標(biāo)簽處于選中狀態(tài)(即藍(lán)底白字);

js通過獲取data-key,設(shè)置input輸入框中placeholder的動態(tài)值

wxml里的內(nèi)容:

<view class="retrieve-list">
  <div class="option">
    <span bindtap="placeholder" data-num='1' data-key='' data-val='' class="{{num==1?'active':''}}">全部</span>
    <span bindtap="placeholder" data-num='2' data-key='標(biāo)題' data-val='ti' class="{{num==2?'active':''}}">標(biāo)題</span>
    <span bindtap="placeholder" data-num='3' data-key='摘要' data-val='ab' class="{{num==3?'active':''}}">摘要</span>
    <span bindtap="placeholder" data-num='4' data-key='申請人' data-val='ap' class="{{num==4?'active':''}}">申請人</span>
    <span bindtap="placeholder" data-num='5' data-key='申請?zhí)? data-val='an' class="{{num==5?'active':''}}">申請?zhí)?lt;/span>
    <span bindtap="placeholder" data-num='6' data-key='代理人' data-val='ag' class="{{num==6?'active':''}}">代理人</span>
  </div>
  <div class="option">
    <span bindtap="placeholder" data-num='7' data-key='代理機構(gòu)' data-val='ac' class="{{num==7?'active':''}}">代理機構(gòu)</span>
    <span bindtap="placeholder" data-num='8' data-key='公開號' data-val='pn' class="{{num==8?'active':''}}">公開號</span>
    <span bindtap="placeholder" data-num='9' data-key='發(fā)明人' data-val='in' class="{{num==9?'active':''}}">發(fā)明人</span>
    <span bindtap="placeholder" data-num='10' data-key='專利權(quán)人' data-val='pa' class="{{num==10?'active':''}}">專利權(quán)人</span>
  </div>
</view>

js里的內(nèi)容:

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

希望本文所述對大家微信小程序開發(fā)有所幫助。

相關(guān)文章

  • 通過javascript的匿名函數(shù)來分析幾段簡單有趣的代碼

    通過javascript的匿名函數(shù)來分析幾段簡單有趣的代碼

    想起自己很久以前學(xué)習(xí)javascript的經(jīng)歷,也曾經(jīng)碰到過幾個由匿名函數(shù)造成的困擾(其中一個就是由閉包引起的),下面就整理幾段簡單代碼討論一下,讓我們大家一起進(jìn)步。
    2010-06-06
  • javascript封裝 Cookie 應(yīng)用接口

    javascript封裝 Cookie 應(yīng)用接口

    本文通過幾個簡單的示例向大家展示了javascript封裝cookie的注意事項及操作方法,非常的簡單實用,最后附上一則具體實例,有需要的小火把可以參考下。
    2015-08-08
  • JS實現(xiàn)表單驗證案例

    JS實現(xiàn)表單驗證案例

    這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)表單驗證案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • javascript this用法小結(jié)

    javascript this用法小結(jié)

    this是JavaScript中功能最強大的關(guān)鍵字之一。不幸的是,如果你不知道它具體怎么工作,你將很難正確使用它。
    2008-12-12
  • javascript將ip地址第四段用星號代替的兩種方法

    javascript將ip地址第四段用星號代替的兩種方法

    javascript將ip地址第四段用星號代替的方法,需要的朋友可以參考下。
    2010-03-03
  • js+css實現(xiàn)文字散開重組動畫特效代碼分享

    js+css實現(xiàn)文字散開重組動畫特效代碼分享

    這篇文章主要介紹了js+css實現(xiàn)文字散開重組動畫特效,需要的朋友可以參考下
    2015-08-08
  • JavaScript數(shù)組及常見操作方法小結(jié)

    JavaScript數(shù)組及常見操作方法小結(jié)

    這篇文章主要介紹了JavaScript數(shù)組及常見操作方法,結(jié)合實例形式總結(jié)分析了JavaScript數(shù)組的基本獲取、添加、刪除、排序、翻轉(zhuǎn)等相關(guān)操作技巧,需要的朋友可以參考下
    2019-11-11
  • javascript算法學(xué)習(xí)(直接插入排序)

    javascript算法學(xué)習(xí)(直接插入排序)

    假設(shè)待排序的記錄存放在數(shù)組R[1..n]中。初始時,R[1]自成1個有序區(qū),無序區(qū)為R[2..n]。從i=2起直至i=n為止,依次將R[i]插入當(dāng)前的有序區(qū)R[1..i-1]中,生成含n個記錄的有序區(qū)。
    2011-04-04
  • javascript笛卡爾積算法實現(xiàn)方法

    javascript笛卡爾積算法實現(xiàn)方法

    這篇文章主要介紹了javascript笛卡爾積算法實現(xiàn)方法,實例分析了笛卡爾積算法的javascript實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-04-04
  • Cocos2d實現(xiàn)刮刮卡效果

    Cocos2d實現(xiàn)刮刮卡效果

    這篇文章主要為大家詳細(xì)介紹了Cocos2d實現(xiàn)刮刮卡效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-12-12

最新評論