提交 2415ee64 编写于 作者: D dolymood

update doc

上级 3eebcbcf
...@@ -2,6 +2,16 @@ ...@@ -2,6 +2,16 @@
滚动列表,提供了优质的原生滚动体验,便捷的配置项和事件,是一个基于`better-scroll`进行封装的组件。 滚动列表,提供了优质的原生滚动体验,便捷的配置项和事件,是一个基于`better-scroll`进行封装的组件。
### 滚动原理
由于 better-scroll 的滚动原理为:在滚动方向上,第一个子元素的长度超过了容器的长度。
那么对于 Scroll 组件,其实就是内容元素`.cube-scroll-content`在滚动方向上的长度必须大于容器元素 `.cube-scroll-wrapper`。根据滚动方向的不同,有以下两种情况:
1)纵向滚动:内容元素的高度必须大于容器元素。由于容器元素的高度默认会被子元素的高度撑开,所以为了满足我们的滚动前提,你需要给 Scroll 组件的 `.cube-scroll-wrapper`元素一个非弹性高度。
2)横向滚动:内容元素的宽度必须大于容器元素。由于在默认情况下,子元素的宽度不会超过容器元素,所以需要给 Scroll 组件的 `.cube-scroll-content` 元素设置大于 `.cube-scroll-wrapper` 的宽度。
### 示例 ### 示例
- 基本使用 - 基本使用
...@@ -17,18 +27,6 @@ ...@@ -17,18 +27,6 @@
height: 100px height: 100px
``` ```
- 滚动原理
由于 better-scroll 的滚动原理为:在滚动方向上,第一个子元素的长度超过了容器的长度。
那么对于 Scroll 组件,其实就是内容元素`.cube-scroll-content`在滚动方向上的长度必须大于容器元素 `.cube-scroll-wrapper`。根据滚动方向的不同,有以下两种情况:
1)纵向滚动:内容元素的高度必须大于容器元素。由于容器元素的高度默认会被子元素的高度撑开,所以为了满足我们的滚动前提,你需要给 Scroll 组件的 `.cube-scroll-wrapper`元素一个非弹性高度。
2)横向滚动:内容元素的宽度必须大于容器元素。由于在默认情况下,子元素的宽度不会超过容器元素,所以需要给 Scroll 组件的 `.cube-scroll-content` 元素设置大于 `.cube-scroll-wrapper` 的宽度。
- 配置 better-scroll 选项 - 配置 better-scroll 选项
通过 options 属性可以配置 better-scroll 的选项,包括滚动条、下拉刷新、上拉加载等,具体可查看 better-scroll 的[官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html),这里仅对几个常用的配置项进行介绍说明。 通过 options 属性可以配置 better-scroll 的选项,包括滚动条、下拉刷新、上拉加载等,具体可查看 better-scroll 的[官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html),这里仅对几个常用的配置项进行介绍说明。
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</div> </div>
<div class="validator-item"> <div class="validator-item">
<cube-validator ref="validator3" v-model="isValid[2]" :model="text3" :rules="rules3" :immediate="immediate"> <cube-validator ref="validator3" v-model="isValid[2]" :model="text3" :rules="rules3" :immediate="immediate">
<cube-input v-model="text3" placeholder="async validate odd"></cube-input> <cube-input v-model="text3" placeholder="validate odd"></cube-input>
</cube-validator> </cube-validator>
</div> </div>
<div class="validator-item"> <div class="validator-item">
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册