最近把項目中使用到的部分組件和一些平時寫的組件整理了一下牢撼，放在一個小程序中夏醉，僅供參考爽锥！文章底部有github鏈接。
如果有同學暫時不知道如何使用自定義組件畔柔，可以查看微信小程序官方文檔 自定義組件 或者下載源碼查看
組件一氯夷、Music
這個組件是音樂播放動畫組件，類似網(wǎng)易云右上角的線條動畫靶擦。
用這個組件的時候需要在外面包一層view
具體樣式可參考源碼pages/music
下面是簡單的示例代碼
<view class='music_bg">
<wxzx-music live-state="true"></wxzx-music>
</view>
<style>
.music_bg {
width: 80rpx;
height: 40rpx; // 組件線條默認高度為40腮考，背景view的高度要與組件高度一致
overflow: hidden;
position: relative;
}
</style>
屏幕錄制 2018-11-20 下午9.11.52.gif
參數(shù)釋義如下：
| 名稱 | 描述 |
|---|---|
| line-count | 線條個數(shù)雇毫，默認為4，偶數(shù)為先長后短踩蔚，基數(shù)為先短后長 |
| line-color | 線條顏色棚放，默認為#ff6600 |
| line-width | 線條寬度，默認為6 |
| line-height | 線條高度寂纪，默認為40席吴，背景view的高度需與線條高度一致 |
| live-state | 播放狀態(tài)，默認為die捞蛋，living為播放孝冒，die為停止播放 |
組件二、navbar
微信在前不久開放了自定義導航欄的功能拟杉，安卓端和微信端終于可以顯示一樣的導航欄了庄涡！希望可以盡早開放自定義tabbar的功能。
導航欄的使用沒有什么限制搬设，值得一提的是我沒有區(qū)分安卓跟ios導航欄的高度穴店，都設置成了44，如果介意的朋友可以自己改一下源碼拿穴。
要使用這個組件泣洞，首先要配置app.json，如下
"window": {
"navigationStyle": "custom"
},
下面是簡單的代碼示例
<wxzx-navbar nav-title="導航欄"></wxzx-navbar>
屏幕錄制 2018-11-20 下午9.12.27.gif
參數(shù)釋義如下：
| 名稱 | 描述 |
|---|---|
| nav-title-font-size | 標題大小默色，默認為18px |
| nav-title-color | 標題顏色球凰，默認為#000000 |
| nav-background-color | 導航欄背景色，默認為#ffffff |
| nav-back-button-color | 導航欄返回按鈕顏色腿宰，默認為#000000 |
| nav-title | 標題文字 |
| is-tabbar | 是否為tabbar頁面呕诉，默認為false，在使用tabbar的頁面設置為true吃度，用于分享頁面進入時判斷是否顯示返回上一頁按鈕或返回首頁按鈕 |
組件三甩挫、popup
彈出層，用于顯示消息椿每，廣告等等伊者。內(nèi)置了部分平移動畫和縮放動畫
下面是簡單的代碼示例
<wxzx-popup popup-show="true" popup-style="center" content-alignment="scale" z-index='9999'>
<view class="popup_content">center center</view>
</wxzx-popup>
屏幕錄制 2018-11-20 下午9.13.11.gif
參數(shù)釋義如下：
| 名稱 | 描述 |
|---|---|
| popup-style | 動畫類型，默認為scale间护。 -- scale： 縮放删壮； -- left： 從左往右；-- right: 從右往左兑牡；-- top：從上到下； -- bottom：從下到上 |
| mask | 是否鎖定遮罩層税灌，默認為false |
| z-Index | 遮罩層級均函，默認為999 |
| content-alignment | 內(nèi)部視圖在popup中的位置亿虽，默認為center。 -- center：居中苞也； -- left：居左洛勉； -- right：居右； -- top：居上如迟； -- bottom：居下收毫； |
| offset | 內(nèi)部視圖距離屏幕邊緣的距離，默認為0 |
| popup-show | 是否顯示popup殷勘，默認為false |
popup-style和content-alignment的具體搭配可參考源碼pages/popup
組件四此再、progress
進度條組件主要是為下面的slider組件做鋪墊。
下面是簡單的代碼示例
<wxzx-progress></wxzx-progress>
屏幕錄制 2018-11-20 下午9.13.57.gif
參數(shù)釋義如下：
| 名稱 | 描述 |
|---|---|
| popup-style | 動畫類型玲销，默認為scale输拇。 -- scale： 縮放； -- left： 從左往右贤斜；-- right: 從右往左策吠；-- top：從上到下； -- bottom：從下到上 |
| percent | 進度條百分比瘩绒，默認為50 |
| width | 進度條長度猴抹，默認為700 |
| stroke-width | 進度條高度，默認為10 |
| active-color | 前景色锁荔，默認為#949494蟀给，可使用漸變色 #949494,#b0b0b0; 以英文逗號隔開 |
| background-color | 背景色，默認為#e5e5e5堕战，背景色不可使用漸變色坤溃，如有需要，可以參照前景色自行修改源碼 |
| radius | 圓角嘱丢，默認為5 |
| orientation | 方向薪介，默認為landscape。 -- landscape 橫向越驻； -- portrait 縱向汁政； |
| portrait-rientation | 縱向進度條開始方向，默認為bottom缀旁。 -- top：從上到下记劈； -- bottom：從下到上； |
組件五并巍、slider
由于系統(tǒng)自帶的slider功能有限目木，所以自定義了一個slider
可以參考之前的文章小程序 自定義slider組件音頻播放實例
屏幕錄制 2018-11-20 下午9.14.24.gif
組件六、elip
文字截斷懊渡，平時在項目中遇到文字截斷的地方比較多刽射，每次都寫樣式也很煩军拟，干脆封裝成組件。
下面簡單的代碼示例
<wxzx-elip line="2">這是一個需要截斷的文本這是一個需要截斷的文本這是一個需要截斷的文本這是一個需要截斷的文本這是一個需要截斷的文本</wxzx-elip>
屏幕錄制 2018-11-20 下午9.15.35.gif
參數(shù)釋義如下：
| 名稱 | 描述 |
|---|---|
| line | 截斷行數(shù)誓禁，默認為1 |
| text | 截斷文字賦值懈息，也可直接在組件間寫文字 |
| custom-class | 自定義組件樣式 |
組件七、notice
通告欄組件摹恰，在頂部提醒用戶一些注意事項
需要在外層包一個view
下面是簡單的代碼示例
<wxzx-notice text="這是一個通告欄辫继，這是一個通告欄，這是一個通告欄俗慈，這是一個通告欄"></wxzx-notice>
屏幕錄制 2018-11-20 下午9.15.52.gif
參數(shù)釋義如下：
| 名稱 | 描述 |
|---|---|
| background-color | 背景色姑宽，默認為#FAFAD2 |
| color | 文字顏色，默認為#d4237a |
| show-icon | 是否顯示前面icon圖標姜盈，默認為false |
| show-close | 是否顯示關閉按鈕低千，默認為false |
| text | 通告欄文字 |
| src | 自定義icon圖標，只有在show-icon為true時才生效 |
| is-scroll | 是否滾動顯示（跑馬燈效果）馏颂，默認為false |
| is-join | 滾動時是否收尾銜接示血，默認為false，只有在is-scroll為true時生效 |
| speed | 滾動速度救拉，默認為1难审，數(shù)值越大滾動越快 |
以上就是目前分享的七個組件，以后若有感覺好用的組件也會在這里分享出來亿絮，供大家參考告喊！
github
微信小程序搜索：
