COMPONENT

新增组件 ClVerticalTab、ClVerticalTabCell

Author: yinLiangDream

.idea/workspace.xml

@@ -29,3 +29,5 @@ 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';

@types/index.d.ts

@@ -33,9 +33,9 @@ export interface IProps {
    *
    * 默认值 `button`
    *
-   * 可选参数 `button`, `text`, `none`, `list`
+   * 可选参数 `button`, `text`, `none`
    */
-  searchType?: 'button' | 'text' | 'none' | 'list';
+  searchType?: 'button' | 'text' | 'none';
   /**
    * 左边的图标组，可选类型请查看 Icon-iconName
    */

@types/searchBar.d.ts

@@ -0,0 +1,24 @@
+import {ComponentClass} from 'react';
+
+export interface IProps {
+  /**
+   * 高度
+   */
+  height: number;
+  /**
+   * 标签页
+   */
+  tabs: {
+    name: string;
+    id: string;
+  }[];
+  /**
+   * 当前激活的标签页 Id
+   */
+  current?: string;
+  children?: any;
+}
+
+declare const VerticalTab: ComponentClass<IProps>;
+
+export default VerticalTab;

@types/verticalTab.d.ts

@@ -0,0 +1,8 @@
+import {ComponentClass} from "react";
+
+export interface IProps {
+  children: any;
+}
+
+declare const VerticalTabCell: ComponentClass<IProps>
+export default VerticalTabCell

@types/verticalTabCell.d.ts

@@ -1,11 +1,11 @@
 {
   "name": "mp-colorui",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（目前仅支持小程序端）",
   "main": "dist/index.js",
   "main:h5": "dist/h5/index.js",
   "types": "./@types/index.d.ts",
-  "github": "https://github.com/yinLiangDream/mp-colorui",
+  "repository": "https://github.com/yinLiangDream/mp-colorui",
   "homepage": "https://yinliangdream.github.io/mp-colorui-doc/#/",
   "files": [
     "dist",

package.json

@@ -0,0 +1,41 @@
+@import "../../style/vars";
+
+.VerticalNav {
+  &.nav {
+    width: 200px;
+    white-space: initial;
+
+    .cu-item {
+      width: 100%;
+      text-align: center;
+      background-color: $white;
+      margin: 0;
+      border: none;
+      height: 100px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: wrap;
+
+      &.cur {
+        background-color: #f1f1f1;
+        color: $blue;
+
+        &::after {
+          content: "";
+          width: 8px;
+          height: 30px;
+          border-radius: 10px 0 0 10px;
+          position: absolute;
+          background-color: $blue;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          margin: auto;
+        }
+
+      }
+    }
+  }
+}

src/components/verticalTab/index.scss

@@ -0,0 +1,100 @@
+import Taro, {pxTransform, useState} from '@tarojs/taro'
+import {ScrollView, View} from "@tarojs/components";
+import {IProps} from '../../../@types/verticalTab'
+
+import './index.scss'
+
+export default function ClVerticalTab(props: IProps) {
+  let scrollTab = false;
+  let id = '';
+  const currentId = props.current ? props.current : props.tabs[0].id;
+  const tabs: {
+    name: string;
+    id: string;
+    top: number;
+    bottom: number;
+  }[] = props.tabs || [];
+  const [current, setCurrent] = useState(currentId);
+  const [verticalNavTop, setVerticalNavTop] = useState(tabs.findIndex(item => item.name === props.tabs[0].name));
+  const [scrollId, setScrollId] = useState(currentId);
+  const [scrollContent, setScrollContent] = useState(0);
+  const onScroll = (e) => {
+    let tabHeight = 0;
+    for (let i = 0; i < tabs.length; i++) {
+      const query = Taro.createSelectorQuery()
+      const view = query.select('#' + tabs[i].id);
+      view.fields({
+        size: true
+      }, (data: any) => {
+        tabs[i].top = tabHeight;
+        tabHeight = tabHeight + data.height;
+        tabs[i].bottom = tabHeight;
+      }).exec();
+    }
+    let scrollTop = e.detail.scrollTop + 20;
+    if (!scrollTab) {
+      for (let i = 0; i < tabs.length; i++) {
+        if (scrollTop > tabs[i].top && scrollTop < tabs[i].bottom) {
+          setVerticalNavTop(i);
+          setCurrent(tabs[i].id);
+          return false
+        }
+      }
+    }
+  }
+  const tabsComponent = tabs.map((item, index) => (
+    <View key={index} className={`cu-item ${current === item.id ? 'cur' : ''}`} onClick={() => {
+      id = item.id;
+      scrollTab = true;
+      changeTop(id);
+      setCurrent(item.id);
+      setVerticalNavTop(tabs.findIndex(tab => tab.name === item.name));
+      setScrollId(item.id);
+    }}
+    >{item.name}</View>
+  ));
+  const changeTop = (id) => {
+    const query = Taro.createSelectorQuery()
+    const view = query.select('#' + id);
+    const topView = query.select('#' + tabs[0].id);
+    let top = 0;
+    topView.fields({
+      rect: true
+    }, (data: any) => {
+      top = data.top;
+    })
+    view.fields({
+      rect: true
+    }, (data: any) => {
+      setTimeout(() => {
+        const endTop = Math.abs(top - data.top);
+        setScrollContent(endTop);
+        scrollTab = false;
+      }, 300)
+
+    }).exec();
+  };
+  return (
+    <View className='flex'>
+      <ScrollView scrollY scrollWithAnimation className='VerticalNav nav' style={{height: pxTransform(props.height)}}
+                  scrollTop={(verticalNavTop - 1) * 50}>
+        {tabsComponent}
+      </ScrollView>
+      <ScrollView scrollY scrollWithAnimation style={{height: pxTransform(props.height)}} scrollIntoView={scrollId}
+                  onScroll={onScroll} scrollTop={scrollContent}>
+        {this.props.children}
+      </ScrollView>
+    </View>
+
+  )
+}
+
+ClVerticalTab.options = {
+  addGlobalClass: true
+}
+
+ClVerticalTab.defaultProps = {
+  tabs: [{name: '', id: ''}],
+  height: 0,
+  current: ''
+} as IProps

src/components/verticalTab/index.tsx

@@ -0,0 +1,16 @@
+import Taro from '@tarojs/taro'
+import ClCard from "../../card";
+
+import {IProps} from '../../../../@types/verticalTabCell'
+
+export default function ClVerticalTabCell(props: IProps) {
+  return (
+    <ClCard>
+      {this.props.children}
+    </ClCard>
+  )
+}
+
+ClVerticalTabCell.options = {
+  addGlobalClass: true
+}

src/components/verticalTab/verticalTabCell/index.tsx

@@ -34,5 +34,7 @@ export { default as ClImagePicker } from './components/imagePicker';
 export { default as ClFlex } from './components/flex';
 export { default as ClGrid } from './components/grid';
 export { default as ClAnimation } from './components/animation';
+export { default as ClVerticalTab } from './components/verticalTab'
+export { default as ClVerticalTabCell } from './components/verticalTab/verticalTabCell'
 
 Taro.initPxTransform({ designWidth: 750, deviceRatio: {} });