ColorUI组件库简易教程之扩展插件

按照惯例,在此奉上官方示例!!!

目录

扩展插件 

索引列表

微动画

全屏抽屉 

垂直导航


扩展插件 

索引列表

索引列表主要由scroll-view标签实现,类名为indexes,具体js逻辑请看源码,有些我没看懂,希望看懂的大佬教教我

ColorUI组件库简易教程之扩展插件_第1张图片 






微动画

微动画我没办法截图展示出来这种动态效果,我就直接给出class了,想要看效果,可以去官方示例去看,这里有几个gif动画,我可以给个图和代码,看一下

ColorUI组件库简易教程之扩展插件_第2张图片 



	


	
		
	
	
		
	


	
		
	
	
		
	


	
		
	
	
		
	

微动画相关class

class 说明 可选值
animation-{{options}} 动画效果 fade / scale-up / scale-down / slide-top / slide-bottom / slide-left / slide-right / shake
animation-reverse 反向动画,配合上面的动画效果使用  

全屏抽屉 

全屏抽屉效果主要分为三个部分,主要有三个类名,第一个类名DrawerPage,就是第一张图总体外部包裹的类名;第二个类名DrawerClose,用来包裹打开抽屉之后关闭部分,如图二红框框出来的部分;第三个类名DrawerWindow,就是打开的抽屉部分了

 ColorUI组件库简易教程之扩展插件_第3张图片                  ColorUI组件库简易教程之扩展插件_第4张图片






垂直导航

垂直导航主要有两个scroll-view标签实现,分别是左侧的导航栏部分和右侧的内容部分,左侧导航栏部分使用类名VerticalBox,右侧内容部分使用类名VerticalMain 

ColorUI组件库简易教程之扩展插件_第5张图片






colorUI的简易教程差不多就到这了,欢迎各位大佬的指教!!! 

 

你可能感兴趣的:(Uni-app,ColorUI,文档,uni-app,插件)