API

- Animation 组件
- - 新增 onAnimationStart、onAnimationEnd 事件
- Tabs 组件
- - 新增 tabs 属性下的 id 属性
- - 新增 touchMove 可滑动属性
- VerticalTab 组件
- - 新增 backTop 属性
BUG
- Card 组件
- - 修复插入 children 内容时的异常提醒（不影响使用）

Author: yinLiangDream

.idea/workspace.xml

@@ -5,6 +5,8 @@ export interface IProps {
   reverse?: boolean;
   children?: any;
   delay?: number;
+  onAnimationStart?: (e: any) => void;
+  onAnimationEnd?: (e: any) => void;
 }
 
 declare const ClAnimation: ComponentClass<IProps>;

@types/animation.d.ts

@@ -20,6 +20,7 @@ export interface IProps {
    * 默认 `white`
    */
   bgColor?: bgColorMoreType | bgColorType | lightBgColorType;
+  children?: any;
 }
 
 declare const Card: ComponentClass<IProps>;

@types/card.d.ts

@@ -1,33 +1,33 @@
-export { default as ClAvatar } from './avatar';
-export { default as ClButton } from './button';
-export { default as ClCheckbox } from './checkbox';
-export { default as ClDrawer } from './drawer';
-export { default as ClIcon } from './icon';
-export { default as ClInput } from './input';
-export { default as ClLayout } from './layout';
-export { default as ClLoading } from './loading';
-export { default as ClMenuList } from './menuList';
-export { default as ClModal } from './modal';
-export { default as ClNavBar } from './navBar';
-export { default as ClProgress } from './progress';
-export { default as ClRadio } from './radio';
-export { default as ClSearchBar } from './searchBar';
-export { default as ClSelect } from './select';
-export { default as ClShopBar } from './shopBar';
-export { default as ClStep } from './steps';
-export { default as ClSwiper } from './swiper';
-export { default as ClSwitch } from './switch';
-export { default as ClTabBar } from './tabBar';
-export { default as ClTabs } from './tabs';
-export { default as ClTag } from './tag';
-export { default as ClText } from './text';
-export { default as ClTimeline } from './timeline';
-export { default as ClTitleBar } from './titleBar';
-export { default as ClImagePicker } from './imagePicker';
-export { default as ClCard } from './card';
-export { default as ClScreenDrawer } from './screenDrawer';
-export { default as ClFlex } from './flex';
-export { default as ClGrid } from './grid';
-export { default as ClAnimation } from './animation';
+export {default as ClAvatar} from './avatar';
+export {default as ClButton} from './button';
+export {default as ClCheckbox} from './checkbox';
+export {default as ClDrawer} from './drawer';
+export {default as ClIcon} from './icon';
+export {default as ClInput} from './input';
+export {default as ClLayout} from './layout';
+export {default as ClLoading} from './loading';
+export {default as ClMenuList} from './menuList';
+export {default as ClModal} from './modal';
+export {default as ClNavBar} from './navBar';
+export {default as ClProgress} from './progress';
+export {default as ClRadio} from './radio';
+export {default as ClSearchBar} from './searchBar';
+export {default as ClSelect} from './select';
+export {default as ClShopBar} from './shopBar';
+export {default as ClStep} from './steps';
+export {default as ClSwiper} from './swiper';
+export {default as ClSwitch} from './switch';
+export {default as ClTabBar} from './tabBar';
+export {default as ClTabs} from './tabs';
+export {default as ClTag} from './tag';
+export {default as ClText} from './text';
+export {default as ClTimeline} from './timeline';
+export {default as ClTitleBar} from './titleBar';
+export {default as ClImagePicker} from './imagePicker';
+export {default as ClCard} from './card';
+export {default as ClScreenDrawer} from './screenDrawer';
+export {default as ClFlex} from './flex';
+export {default as ClGrid} from './grid';
+export {default as ClAnimation} from './animation';
 export {default as ClVerticalTab} from './verticalTab';
-export {default as CLVerticalTabCell} from './verticalTabCell';
+export {default as ClVerticalTabCell} from './verticalTabCell';

@types/index.d.ts

@@ -39,16 +39,25 @@ export interface IProps {
     /**
      * 标题
      */
-    text?: string;
+    text: string;
     /**
      * 图标，可选类型请查看 Icon-iconName
      */
     icon?: iconType;
+    /**
+     * 标签唯一标识符
+     */
+    id: string;
   }[];
   /**
    * 点击事件
    */
   onClick?: (index: number) => void;
+  /**
+   * 是否可以拖动内容移动 tab
+   */
+  touchMove?: boolean;
+  children?: any;
 }
 
 export interface TabsProps extends IProps {}

@types/tabs.d.ts

@@ -16,6 +16,10 @@ export interface IProps {
    * 当前激活的标签页 Id
    */
   current?: string;
+  /**
+   * 点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部
+   */
+  backTop?: boolean;
   children?: any;
 }
 

@types/verticalTab.d.ts

@@ -1,8 +1,9 @@
-# MP-COLORUI 是基于 Taro框架的组件库
+# MP-COLORUI 是基于 Taro 框架的组件库
 
 ## 使用方式
 
-> 安装：`npm i mp-colorui`
+> 安装：`npm i mp-colorui`， `yarn add mp-colorui`
+
 > 具体文档请查看：[MP-ColorUI 文档](https://yinliangdream.github.io/mp-colorui-doc/#/)
 
 ## *注意*

README.md

@@ -1,6 +1,6 @@
 {
   "name": "mp-colorui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（目前仅支持小程序端）",
   "main": "dist/index.js",
   "main:h5": "dist/h5/index.js",

package.json

@@ -6,7 +6,12 @@ export default function ClAnimation(props: IProps) {
   const type = props.type;
   const reverse = props.reverse ? 'animation-reverse' : '';
   return (
-    <View className={`animation-${type} ${reverse}`} style={{animationDelay: `${props.delay}s`}}>
+    <View className={`animation-${type} ${reverse}`} style={{animationDelay: `${props.delay}s`}}
+          onAnimationStart={e => {
+            props.onAnimationStart && props.onAnimationStart(e)
+          }} onAnimationEnd={e => {
+      props.onAnimationEnd && props.onAnimationEnd(e)
+    }}>
       {this.props.children}
     </View>
   )

src/components/animation/index.tsx

@@ -1,6 +1,6 @@
 import Taro from '@tarojs/taro';
-import { IProps } from '../../../@types/card.d';
 import { View } from '@tarojs/components';
+import {IProps} from '../../../@types/card.d';
 import { BG_COLOR_LIST } from '../utils/model';
 
 export default function ClCard(props: IProps) {

src/components/card/index.tsx

@@ -0,0 +1,10 @@
+.scrollx {
+  width: 100%;
+  white-space: nowrap;
+
+  view, div {
+    width: 100%;
+    height: 100px;
+    display: inline-block;
+  }
+}