feat(Scroller): initial commit

wya-team · Jul 12, 2021 · f09c914 · f09c914
1 parent d669d07
commit f09c914
Show file tree

Hide file tree

Showing 9 changed files with 745 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -164,7 +164,7 @@ import { Clipboard } from 'wya-vc';
 [Fragment][Fragment] | 空节点 | 1 | Vue 3.x废除
 [Portal][Portal] | 传送门组件 | 1 | -
 [Print][Print] | 打印 | 1 | -
-[Scroller][Scroller] | 滚动条自定义 | 0 | -
+[Scroller][Scroller] | 滚动条自定义 | 1 | -
 [Touch][Touch] | 手势 | 1 | -
 [Transition][Transition] | 动画 | 1 | 同animate.css优化api
 [Upload][Upload] | 上传 | 1 | -
@@ -257,7 +257,7 @@ import { Clipboard } from 'wya-vc';
 [List]: https://github.com/wya-team/wya-vc/tree/master/src/list/
 [Skeleton]: https://github.com/wya-team/wya-vc/tree/master/src/
 [Affix]: https://github.com/wya-team/wya-vc/tree/master/src/
-[Scroller]: https://github.com/wya-team/wya-vc/tree/master/src/
+[Scroller]: https://github.com/wya-team/wya-vc/tree/master/src/scroller/
 [BackTop]: https://github.com/wya-team/wya-vc/tree/master/src/
 [Marquee]: https://github.com/wya-team/wya-vc/tree/master/src/marquee/
 [Artboard]: https://github.com/wya-team/wya-vc/tree/master/src/artboard/

diff --git a/src/scroller/README.md b/src/scroller/README.md
@@ -0,0 +1,37 @@
+最常见的应用场景是列表滚动，我们来看一下它的`html`结构
+
+```
+<div class="wrapper">
+	<ul class="content"> 
+		<li>...</li>
+		<li>...</li>
+		...
+	</ul>
+	<!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
+</div>
+
+<!-- ↓↓↓↓等价↓↓↓↓ -->
+<vc-scroller tag="ul">
+	<li>...</li>
+	<li>...</li>
+	...
+</vc-scroller>
+
+```
+
+外层`wrapper`容器上的，滚动的部分是`content`元素。这里要注意的是，默认处理容器（`wrapper`）的第一个子元素（`content`）的滚动，其它的元素都会被忽略。
+
+## 滚动原理
+
+不能滚动是现象，我们得搞清楚这其中的根本原因。在这之前，我们先来看一下浏览器的滚动原理：
+浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；
+当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。
+也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。
+
+`vc-scroller` 也是一样的原理，我们可以用一张图更直观的感受一下：
+
+![布局](./schematic.png)
+
+绿色部分为 wrapper，也就是父容器，它会有**固定的高度**。
+黄色部分为 content，它是父容器的**第一个子元素**，它的高度会随着内容的大小而撑高。
+那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是`vc-scroller`的滚动原理。
diff --git a/src/scroller/__test__/card.test.js b/src/scroller/__test__/card.test.js
@@ -0,0 +1,63 @@
+import { createComponent, destroyVM, wait } from "@tests/helper";
+import Card from '../index';
+
+describe('Card', () => {
+
+	it("basic", () => {
+		expect(typeof Card).to.equal("object");
+
+		const vm = createComponent(Card, {});
+		expect(typeof vm).to.equal("object");
+
+		destroyVM(vm);
+	});
+
+	it("border", () => {
+		const vm = createComponent(Card, {
+			border: true
+		});
+
+		expect(vm.$el.classList.contains("is-border")).to.equal(true);
+
+		destroyVM(vm);
+	});
+
+	it("shadow", () => {
+		const vm = createComponent(Card, {
+			shadow: true
+		});
+		expect(vm.$el.classList.contains("is-shadow")).to.equal(true);
+
+		destroyVM(vm);
+	});
+
+	it("padding", () => {
+		const vm = createComponent(Card, {
+			padding: 10
+		});
+		const el = vm.$el.querySelector('.vc-card__body');
+		expect(el.style.padding).to.equal('10px');
+
+		destroyVM(vm);
+	});
+
+	it("title", () => {
+		const vm = createComponent(Card, {
+			title: '标题'
+		});
+		const el = vm.$el.querySelector('.vc-card__header');
+		expect(el).to.exist;
+		expect(el.innerText).to.equal('标题');
+		destroyVM(vm);
+	});
+
+	it('icon', () => {
+		const vm = createComponent(Card, {
+			title: '标题',
+			icon: 'success'
+		});
+		const el = vm.$el.querySelector('.vc-icon');
+		expect(el).to.exist;
+		destroyVM(vm);
+	});
+});