小程序自定义组件 progress

最近在开发小程序,有些需要复用的界面模块,为了方便写成了自定义组件,方便以后调用,在这里记录下。其中参考了蘑菇街开源的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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。