微信小程序?qū)崿F(xiàn)動態(tài)設(shè)置placeholder提示文字及按鈕選中/取消狀態(tài)的方法
本文實例講述了微信小程序?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ù)來分析幾段簡單有趣的代碼
想起自己很久以前學(xué)習(xí)javascript的經(jīng)歷,也曾經(jīng)碰到過幾個由匿名函數(shù)造成的困擾(其中一個就是由閉包引起的),下面就整理幾段簡單代碼討論一下,讓我們大家一起進(jìn)步。2010-06-06javascript封裝 Cookie 應(yīng)用接口
本文通過幾個簡單的示例向大家展示了javascript封裝cookie的注意事項及操作方法,非常的簡單實用,最后附上一則具體實例,有需要的小火把可以參考下。2015-08-08JavaScript數(shù)組及常見操作方法小結(jié)
這篇文章主要介紹了JavaScript數(shù)組及常見操作方法,結(jié)合實例形式總結(jié)分析了JavaScript數(shù)組的基本獲取、添加、刪除、排序、翻轉(zhuǎn)等相關(guān)操作技巧,需要的朋友可以參考下2019-11-11javascript算法學(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