diff --git a/document/components/docs/zh-CN/scroll.md b/document/components/docs/zh-CN/scroll.md index e3d27a57042f8e2e270007ed54b522723656b692..6cadecaca75be7943cd7bdb7ae3cb152b01949a0 100644 --- a/document/components/docs/zh-CN/scroll.md +++ b/document/components/docs/zh-CN/scroll.md @@ -2,6 +2,16 @@ 滚动列表,提供了优质的原生滚动体验,便捷的配置项和事件,是一个基于`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 @@ 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 选项 通过 options 属性可以配置 better-scroll 的选项,包括滚动条、下拉刷新、上拉加载等,具体可查看 better-scroll 的[官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html),这里仅对几个常用的配置项进行介绍说明。 diff --git a/example/pages/validator.vue b/example/pages/validator.vue index 716fd5d212c0efe62e1a853565ae453a8c79e5ef..80c24109930978a97a4e6dcd03754bb8911590cd 100644 --- a/example/pages/validator.vue +++ b/example/pages/validator.vue @@ -20,7 +20,7 @@
- +