weex中UISegmentControl實現及遇到的問題

scorpiozj發表於2018-11-20

在最近主導的一個專案中,App端的實現使用了weex。通過近一個月的實踐,我們發現如果對於人機互動較少的App,即使較少前端經驗的人也能迅速進入開發(當然需要一定時間 才能上手weex)。在開發的時候,我們使用了weex-ui庫,但也發現其中有一些控制元件沒有實現,如UISegmentControl。於是抽空實現了一個,效果如下:

weex UISegmentControl

個人感覺和iOS原生的控制元件很相似了,詳細的實現參見 SegmentControl
在使用的時候,可以設定:

  • items: Array,用於展示控制元件上的名字
  • initIndex: Number,初始選中的item次序
  • 當需要響應點選事件的時候,需要新增 @zzhSegmentClicked即可。

需要指出的是,SegmentControl的圓角,色塊和文字選中/未選中的顏色,目前都是hard code,無法通過props傳參來自定義。這也是我希望通過開源後,大家可以一起幫忙改進。先說下我的思路,Vue中修改式樣可以通過繫結 Class 和 style 的方式。在當前的情況下,需要自定義圓角、色塊和文字,因此繫結Class是不可行的。那繫結style的話,要傳一個物件:對於只需要自定義圓角的情形,也需要把其他屬性值也寫入。檢視現有的class實現,可以發現需要的style型別有三種:最左邊,最右邊和其他,這樣書寫會非常冗長,也不友好。

因此,理想的實現,最好和原生一樣,如iOS中傳一個tintColor就直接修改選中的顏色。因為對前端不熟悉並且專案時間緊,沒能深究下去。希望能在這裡找到答案或者解決思路。

 

本文首發於: weex中UISegmentControl實現

相關文章