最近把项目中使用到的部分组件和一些平时写的组件整理了一下，放在一个小程序中，仅供参考！文章底部有github链接。
如果有同学暂时不知道如何使用自定义组件，可以查看微信小程序官方文档 自定义组件 或者下载源码查看
组件一、Music
这个组件是音乐播放动画组件，类似网易云右上角的线条动画。
用这个组件的时候需要在外面包一层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
参数释义如下：
| 名称 | 描述 |
|---|---|
| line-count | 线条个数，默认为4，偶数为先长后短，基数为先短后长 |
| line-color | 线条颜色，默认为#ff6600 |
| line-width | 线条宽度，默认为6 |
| line-height | 线条高度，默认为40，背景view的高度需与线条高度一致 |
| live-state | 播放状态，默认为die，living为播放，die为停止播放 |
组件二、navbar
微信在前不久开放了自定义导航栏的功能，安卓端和微信端终于可以显示一样的导航栏了！希望可以尽早开放自定义tabbar的功能。
导航栏的使用没有什么限制，值得一提的是我没有区分安卓跟ios导航栏的高度，都设置成了44，如果介意的朋友可以自己改一下源码。
要使用这个组件，首先要配置app.json，如下
"window": {
"navigationStyle": "custom"
},
下面是简单的代码示例
<wxzx-navbar nav-title="导航栏"></wxzx-navbar>
屏幕录制 2018-11-20 下午9.12.27.gif
参数释义如下：
| 名称 | 描述 |
|---|---|
| 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
弹出层，用于显示消息，广告等等。内置了部分平移动画和缩放动画
下面是简单的代码示例
<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
参数释义如下：
| 名称 | 描述 |
|---|---|
| popup-style | 动画类型，默认为scale。 -- scale： 缩放； -- left： 从左往右；-- right: 从右往左；-- top：从上到下； -- bottom：从下到上 |
| mask | 是否锁定遮罩层，默认为false |
| z-Index | 遮罩层级，默认为999 |
| content-alignment | 内部视图在popup中的位置，默认为center。 -- center：居中； -- left：居左； -- right：居右； -- top：居上； -- bottom：居下； |
| offset | 内部视图距离屏幕边缘的距离，默认为0 |
| popup-show | 是否显示popup，默认为false |
popup-style和content-alignment的具体搭配可参考源码pages/popup
组件四、progress
进度条组件主要是为下面的slider组件做铺垫。
下面是简单的代码示例
<wxzx-progress></wxzx-progress>
屏幕录制 2018-11-20 下午9.13.57.gif
参数释义如下：
| 名称 | 描述 |
|---|---|
| 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
由于系统自带的slider功能有限，所以自定义了一个slider
可以参考之前的文章小程序 自定义slider组件音频播放实例
屏幕录制 2018-11-20 下午9.14.24.gif
组件六、elip
文字截断，平时在项目中遇到文字截断的地方比较多，每次都写样式也很烦，干脆封装成组件。
下面简单的代码示例
<wxzx-elip line="2">这是一个需要截断的文本这是一个需要截断的文本这是一个需要截断的文本这是一个需要截断的文本这是一个需要截断的文本</wxzx-elip>
屏幕录制 2018-11-20 下午9.15.35.gif
参数释义如下：
| 名称 | 描述 |
|---|---|
| line | 截断行数，默认为1 |
| text | 截断文字赋值，也可直接在组件间写文字 |
| custom-class | 自定义组件样式 |
组件七、notice
通告栏组件，在顶部提醒用户一些注意事项
需要在外层包一个view
下面是简单的代码示例
<wxzx-notice text="这是一个通告栏，这是一个通告栏，这是一个通告栏，这是一个通告栏"></wxzx-notice>
屏幕录制 2018-11-20 下午9.15.52.gif
参数释义如下：
| 名称 | 描述 |
|---|---|
| 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，数值越大滚动越快 |
以上就是目前分享的七个组件，以后若有感觉好用的组件也会在这里分享出来，供大家参考！
github
微信小程序搜索：
网友评论