這篇文章主要介紹了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)設(shè)置placeholder提示文字及按鈕選中/取消狀態(tài)的方法,涉及事件綁定及this.setdata動(dòng)態(tài)設(shè)置屬性數(shù)據(jù)的相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)設(shè)置placeholder提示文字及按鈕選中取消狀態(tài)的方法。分享給大家供大家參考，具體如下：
效果圖展示
通過綁定點(diǎn)擊事件placeholder方法，獲取data-num的值，通過js判斷num等于幾，然后通過class=”{{num==X?’active’:”}}”表達(dá)式判斷哪個(gè)標(biāo)簽處于選中狀態(tài)（即藍(lán)底白字）；
js通過獲取data-key，設(shè)置input輸入框中placeholder的動(dòng)態(tài)值
wxml里的內(nèi)容：
<view class="retrieve-list">
<p 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='申請(qǐng)人' data-val='ap' class="{{num==4?'active':''}}">申請(qǐng)人</span>
<span bindtap="placeholder" data-num='5' data-key='申請(qǐng)?zhí)?#039; data-val='an' class="{{num==5?'active':''}}">申請(qǐng)?zhí)?lt;/span>
<span bindtap="placeholder" data-num='6' data-key='代理人' data-val='ag' class="{{num==6?'active':''}}">代理人</span>
</p>
<p class="option">
<span bindtap="placeholder" data-num='7' data-key='代理機(jī)構(gòu)' data-val='ac' class="{{num==7?'active':''}}">代理機(jī)構(gòu)</span>
<span bindtap="placeholder" data-num='8' data-key='公開號(hào)' data-val='pn' class="{{num==8?'active':''}}">公開號(hào)</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>
</p>
</view>
登錄后復(fù)制
js里的內(nèi)容：
var app = getApp()
Page({
data: {
placeholder:'請(qǐng)輸入',
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ù)制
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)！
相關(guān)推薦：
以上就是微信小程序?qū)崿F(xiàn)動(dòng)態(tài)設(shè)置placeholder提示文字及按鈕選中/取消狀態(tài)的方法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注有卡有網(wǎng)。
