這段時(shí)間的主業(yè)是完成一個(gè)家政類小程序，終于是過審核發(fā)布了。不得不說微信的這個(gè)小程序生態(tài)還是頗有想法的，拋開他現(xiàn)有的一些問題不說，其提供的組件系統(tǒng)乍一看還是蠻酷的。比如其提供的一個(gè)叫swiper的視圖組件，就可以在寫界面的時(shí)候省不少時(shí)間和代碼，輪播圖片跟可滑動(dòng)列表都可以用。導(dǎo)致現(xiàn)在回來寫angular項(xiàng)目時(shí)也想整一個(gè)這樣的組件出來，本文就將使用angular的組件能力和服務(wù)能力完成這么一個(gè)比較通用，耦合度較低的swiper出來。
首先要選擇使用的技術(shù)，要實(shí)現(xiàn)的是與界面打交道的東西，自然是實(shí)現(xiàn)成一個(gè)組件，最終要實(shí)現(xiàn)的效果是寫下這樣的代碼就可以完成一個(gè)可以滑動(dòng)的視圖來：
<swipers>
<swiper>視圖1</swiper>
<swiper>視圖2</swiper>
</swipers>
然后要把最基本的組件定義寫出來，顯然這里要定義兩個(gè)組件。第一個(gè)是父級(jí)組件，選擇器名字就叫ytm-swipers，目前做的事情僅僅是做一個(gè)外殼定義基本樣式，使用時(shí)的子標(biāo)簽都會(huì)插入在ng-content標(biāo)簽中。
網(wǎng)友評論
