最近在开发小程序,有些需要复用的界面模块,为了方便写成了自定义组件,方便以后调用,在这里记录下。其中参考了蘑菇街开源的MinUI组件库和小程序的官方文档,蘑菇街的组件库提供了丰富的组件,有兴趣的同学可以看看。
下面讲讲开发组件中遇到的问题和该组件的基本用法。
PS:如果有同学要用的话
progress组件官方是有提供的,功能也比较齐全,这里主要加了一个渐变前景色的功能,这个组件主要是为了slider组件打底,所以没有加其他的功能,功能基本上和原生的一样。
开发和只用组件有几个要注意的点
1、在组件的json文件中写上
"component": true
2、在使用组件的json文件中写上
"usingComponents": {
"wxzx-progress": "../wxzx-progress/wxzx-progress"
}
其中wxzx-progress 是你组件的名字,可以随便写
后面跟上该组件的路径
若要引用多个组件,则逗号隔开
3、在使用组件的wxml页面使用组件,组件名就是json文件中定义的名字
<wxzx-progress></wxzx-progress>
下面介绍几个该组件的用法,更多用法请到文末的github地址下载demo
默认
<wxzx-progress></wxzx-progress>
设置百分比
<wxzx-progress percent='90'></wxzx-progress>
设置渐变色
<wxzx-progress active-color='#ff6600, #000000' percent='90'></wxzx-progress>
设置长度
<wxzx-progress active-color="#ff6600" percent='90' width='600'></wxzx-progress>
下载地址: demo