Weex富文本W(wǎng)XRichLabel實(shí)踐

在上篇的基礎(chǔ)上處理:

Weex自定義WXRichText組件實(shí)踐
Weex 富文本 Weex協(xié)議 Weex鏈接 WXRichLabel Weex Label點(diǎn)擊事件
上篇的不足:
處理點(diǎn)擊事件時(shí),是寫死在原生了然低,還是怪當(dāng)時(shí)太年輕,不管是我劲赠,還是weex颗品,用的0.13版本,現(xiàn)在github上都沒有這個(gè)版本,可見當(dāng)時(shí)坑還是有的稠集。

所以,在此基礎(chǔ)上此次的WXRichLabel配置更加自由饥瓷,且能在js拿到點(diǎn)擊事件自由處理剥纷,我本來想的一個(gè)數(shù)組里放可點(diǎn)擊事件的元素,如果字號呢铆,顏色晦鞋,哪些字,jsCall事件棺克,無奈放數(shù)組里了悠垛,到iOS原生就成了一個(gè)字典,當(dāng)時(shí)就無解了娜谊,后面想到要么此界面用原生确买,要么事件寫死在原生,傳入不同的type類型纱皆,顯示不一樣的東西湾趾,不過這樣太不人性化了, 也太死板了派草,純粹就是浪費(fèi)生命啊搀缠。所以后面從大師那里學(xué)到了經(jīng)驗(yàn),用fireEvent事件發(fā)送點(diǎn)擊處的相關(guān)信息近迁。start end color text 等相關(guān)信息艺普,奇妙的是你fireEvent的這個(gè)名字在js里可以直接用@他,就能接收到這個(gè)通知,太神奇了衷敌,然后在參數(shù)里勿侯,就可以拿到這些值了。

使用方法
iOS端

// AppDelegate+Weex里注冊組件
 [WXSDKEngine registerComponent:@"richLabel" withClass:[WXRichLabel class]];

weex端

// 畫出你想要的UI
<richLabel class="richLabel" @richClick="richClick" richData="[{'start':'0','end':'5','color':'#f45762'},{'start':'6','end':'10','color':'#f45762'}]" ></richLabel>
 
 
 // richLabel的點(diǎn)擊事件
 richClick: function(e) {
   modal.toast({
     message: "" + e.start, e.end, e.color, e.text,
     duration: 1
   });
 }
.richLabel {
   margin-top: 30;
   margin-bottom: 30;
   border-width: 2px;
   border-style: solid;
   border-color: #41b883;
   width: auto;
   height: 100px;
   margin: 20px;
   padding: 10px;
 
   font-size: 28px;
   normalcolor: #2a2a2a;
   text: "我已閱讀并同意《借款協(xié)議》《債權(quán)轉(zhuǎn)讓協(xié)議》《網(wǎng)絡(luò)借貸風(fēng)險(xiǎn)和禁止性行為提示書》";
   linespacing: 16px;
   width: 690px;
 }
 

https://github.com/songxing10000/WXRichLabel

問題:可點(diǎn)擊文本目前只能是同一個(gè)顏色缴罗,所以我取的richData里每一個(gè)字典里的顏色作為所有可點(diǎn)擊字的顏色助琐。

TTTAttributedLabel里可點(diǎn)擊的文本必須是同一個(gè)顏色,或者是我沒找到設(shè)置不同點(diǎn)擊處文字不顏色的方法面氓,有知道的請告知兵钮,如果有。

解決方案:
一舌界、使用YYText
可實(shí)現(xiàn)為特定字加特定色加特定事件
優(yōu)點(diǎn):兼容性好掘譬。
缺點(diǎn):引用的文件太多。
二呻拌、使用UILable加上tap事件葱轩,富文件顏色,判斷位置
優(yōu)點(diǎn):加個(gè)方法藐握,不用導(dǎo)入多文件靴拱。
缺點(diǎn):兼容性,適應(yīng)性不夠強(qiáng)猾普,換行袜炕,大小,擠壓等初家。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末偎窘,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子溜在,更是在濱河造成了極大的恐慌陌知,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,290評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件掖肋,死亡現(xiàn)場離奇詭異纵诞,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)培遵,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評論 2 385
  • 文/潘曉璐 我一進(jìn)店門浙芙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人籽腕,你說我怎么就攤上這事嗡呼。” “怎么了皇耗?”我有些...
    開封第一講書人閱讀 156,872評論 0 347
  • 文/不壞的土叔 我叫張陵南窗,是天一觀的道長。 經(jīng)常有香客問我,道長万伤,這世上最難降的妖魔是什么窒悔? 我笑而不...
    開封第一講書人閱讀 56,415評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮敌买,結(jié)果婚禮上简珠,老公的妹妹穿的比我還像新娘。我一直安慰自己虹钮,他們只是感情好聋庵,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,453評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著芙粱,像睡著了一般祭玉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上春畔,一...
    開封第一講書人閱讀 49,784評論 1 290
  • 那天脱货,我揣著相機(jī)與錄音,去河邊找鬼律姨。 笑死振峻,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的线召。 我是一名探鬼主播,決...
    沈念sama閱讀 38,927評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼多矮,長吁一口氣:“原來是場噩夢啊……” “哼缓淹!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起塔逃,我...
    開封第一講書人閱讀 37,691評論 0 266
  • 序言:老撾萬榮一對情侶失蹤讯壶,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后湾盗,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體伏蚊,經(jīng)...
    沈念sama閱讀 44,137評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,472評論 2 326
  • 正文 我和宋清朗相戀三年格粪,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了躏吊。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,622評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡帐萎,死狀恐怖比伏,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情疆导,我是刑警寧澤赁项,帶...
    沈念sama閱讀 34,289評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響悠菜,放射性物質(zhì)發(fā)生泄漏舰攒。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,887評論 3 312
  • 文/蒙蒙 一悔醋、第九天 我趴在偏房一處隱蔽的房頂上張望摩窃。 院中可真熱鬧,春花似錦篙顺、人聲如沸偶芍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽匪蟀。三九已至,卻和暖如春宰僧,著一層夾襖步出監(jiān)牢的瞬間材彪,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工琴儿, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留段化,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,316評論 2 360
  • 正文 我出身青樓造成,卻偏偏與公主長得像显熏,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子晒屎,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,490評論 2 348