相關(guān)推薦
您可能對(duì)下面課程感興趣
Axure8.0視頻教程

74小節(jié)已有16904人學(xué)過

UI交互app及axure設(shè)計(jì)教程

84小節(jié)已有76400人學(xué)過

Axure實(shí)現(xiàn)漢字拼音首字母的查詢
發(fā)布時(shí)間:2022-03-17 09:39 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 1342

上圖就是我們要實(shí)現(xiàn)的目標(biāo):輸入一個(gè)漢字能夠查到它的拼音首字母。

實(shí)際上,明白了實(shí)現(xiàn)原理之后,通過漢字查拼音、查聲母都是可以實(shí)現(xiàn)的。

關(guān)鍵在于有沒有一個(gè)能夠使用的源數(shù)據(jù)。

我們先來看看元件的準(zhǔn)備工作。

上面這張圖,大家能夠看到這個(gè)案例使用的所有元件。

最關(guān)鍵的就是命名為“PinYin”的這個(gè)元件,它的文字包含了所有的文字以及對(duì)應(yīng)的拼音首字母。

我們能夠看到源數(shù)據(jù)的格式有一定的規(guī)律:[相同拼音首字母的所有文字][拼音首字母][逗號(hào)]……

那么,試想一下,當(dāng)我們輸入一個(gè)文字點(diǎn)查詢時(shí):

1、查詢到漢字在源數(shù)據(jù)中出現(xiàn)的位置;

2、從查詢到的位置向后查詢逗號(hào)所在的位置;

3、獲取到逗號(hào)所在位置前一位的拼音首字母。

完美!

所以,當(dāng)我們準(zhǔn)備好元件(注意將元件“PinYin”縮小尺寸后隱藏),就可以添加交互了。

交互如上圖所示:

查找按鈕“Search”【鼠標(biāo)單擊時(shí)】,添加用例與動(dòng)作:【設(shè)置文字】于元件“Result”為一個(gè)公式…

具體公式是什么樣子的呢?

如下圖所示:

公式的完整內(nèi)容是:“漢字的首字母是:[[p.charAt(p.indexOf(\’,\’,p.indexOf(w))-1)]]”。

簡(jiǎn)單說明一下:

  • “p”和“w”是兩個(gè)局部變量,分別存入了源數(shù)據(jù)和輸入的漢字內(nèi)容;
  • “p.charAt()”能夠獲取指定位置的字符;
  • “p.indexOf(w)”能夠獲取漢字在源數(shù)據(jù)中出現(xiàn)的位置。
  • “p.indexOf(\’,\’,p.indexOf(w))-1”能夠從漢字位置開始向右查找逗號(hào)所在的位置,找到的位置減1就是拼音首字母的位置。

這里值得一提的是“indexOf()”這個(gè)函數(shù),它能夠由左至右的從一個(gè)字符串中查詢參數(shù)字符串出現(xiàn)的位置,它有兩個(gè)參數(shù),分別是“被查詢的字符串”和“查詢的起始位置”,如果沒有提供第二個(gè)參數(shù)默認(rèn)從最左側(cè)向右查詢。

好了,到這里這個(gè)案例就完成了。

希望大家能夠從這個(gè)案例中學(xué)習(xí)到有用的知識(shí)點(diǎn)。

UI交互app及axure設(shè)計(jì)教程
我要自學(xué)網(wǎng)商城 ¥50 元
進(jìn)入購買
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
相關(guān)推薦
您可能對(duì)下面課程感興趣
Axure8.0視頻教程

74小節(jié)已有16904人學(xué)過

UI交互app及axure設(shè)計(jì)教程

84小節(jié)已有76400人學(xué)過

分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫 程序開發(fā) 網(wǎng)頁設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC