weex中UISegmentControl實現及遇到的問題

在最近主導的一個項目中，App端的實現使用了weex。經過近一個月的實踐，咱們發現若是對於人機交互較少的App，即便較少前端經驗的人也能迅速進入開發(固然須要必定時間 才能上手weex)。在開發的時候，咱們使用了weex-ui庫，但也發現其中有一些控件沒有實現，如UISegmentControl。因而抽空實現了一個，效果以下：

我的感受和iOS原生的控件很類似了，詳細的實現參見 SegmentControl 。
在使用的時候，能夠設置：

• items: Array，用於展現控件上的名字
• initIndex: Number，初始選中的item次序
• 當須要響應點擊事件的時候，須要添加 @zzhSegmentClicked便可。

須要指出的是，SegmentControl的圓角，色塊和文字選中/未選中的顏色，目前都是hard code，沒法經過props傳參來自定義。這也是我但願經過開源後，你們能夠一塊兒幫忙改進。先說下個人思路，Vue中修改式樣能夠經過綁定 Class 和 style 的方式。在當前的狀況下，須要自定義圓角、色塊和文字，所以綁定Class是不可行的。那綁定style的話，要傳一個對象：對於只須要自定義圓角的情形，也須要把其餘屬性值也寫入。查看現有的class實現，能夠發現須要的style類型有三種：最左邊，最右邊和其餘，這樣書寫會很是冗長，也不友好。

所以，理想的實現，最好和原生同樣，如iOS中傳一個tintColor就直接修改選中的顏色。由於對前端不熟悉而且項目時間緊，沒能深究下去。但願能在這裏找到答案或者解決思路。

 

本文首發於： weex中UISegmentControl實現