webpackJsonp([19],{"/Z59":function(s,t,a){var l=a("VU/8")(null,a("UPjJ"),null,null,null);s.exports=l.exports},UPjJ:function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"Scroll"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Scroll-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Scroll")]),s._v(" "),s._m(0),s._v(" "),a("h3",{attrs:{id:"滚动原理"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-滚动原理-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" 滚动原理")]),s._v(" "),a("p",[s._v("由于 better-scroll 的滚动原理为：在滚动方向上，第一个子元素的长度超过了容器的长度。")]),s._v(" "),s._m(1),s._v(" "),s._m(2),s._v(" "),s._m(3),s._v(" "),s._m(4),s._v(" "),a("h3",{attrs:{id:"示例"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-示例-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" 示例")]),s._v(" "),a("p",[s._v("7 个示例代码快速了解如何使用 Scroll 组件。")]),s._v(" "),s._m(5),s._v(" "),a("h3",{attrs:{id:"Props配置"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Props配置-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Props 配置")]),s._v(" "),s._m(6),s._v(" "),s._m(7),s._v(" "),s._m(8),s._v(" "),s._m(9),s._v(" "),s._m(10),s._v(" "),s._m(11),s._v(" "),s._m(12),s._v(" "),s._m(13),s._v(" "),a("h3",{attrs:{id:"插槽"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-插槽-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" 插槽")]),s._v(" "),s._m(14),s._v(" "),a("h3",{attrs:{id:"事件"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-事件-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" 事件")]),s._v(" "),s._m(15),s._v(" "),a("h3",{attrs:{id:"方法"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-方法-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" 方法")]),s._v(" "),s._m(16),s._v(" "),a("h3",{attrs:{id:"内部属性"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-内部属性-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" 内部属性")]),s._v(" "),s._m(17)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("滚动列表，提供了优质的原生滚动体验，便捷的配置项和事件，是一个基于"),a("code",{pre:!0},[s._v("better-scroll")]),s._v("进行封装的组件。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("那么对于 Scroll 组件，其实就是内容元素"),a("code",{pre:!0},[s._v(".cube-scroll-content")]),s._v("在滚动方向上的长度必须大于容器元素 "),a("code",{pre:!0},[s._v(".cube-scroll-wrapper")]),s._v("。根据滚动方向的不同，有以下两种情况：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("1）纵向滚动："),a("strong",[s._v("内容元素的高度必须大于容器元素")]),s._v("。由于容器元素的高度默认会被子元素的高度撑开，所以为了满足我们的滚动前提，你需要给 Scroll 组件的 "),a("code",{pre:!0},[s._v(".cube-scroll-wrapper")]),s._v("元素一个非弹性高度。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("2）横向滚动："),a("strong",[s._v("内容元素的宽度必须大于容器元素")]),s._v("。由于在默认情况下，子元素的宽度不会超过容器元素，所以需要给 Scroll 组件的 "),a("code",{pre:!0},[s._v(".cube-scroll-content")]),s._v(" 元素设置大于 "),a("code",{pre:!0},[s._v(".cube-scroll-wrapper")]),s._v(" 的宽度。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("blockquote",[a("p",[s._v("注意：任何时候如果出现无法滚动的情况，都应该首先查看内容元素"),a("code",{pre:!0},[s._v(".cube-scroll-content")]),s._v("的元素高度/宽度是否大于容器元素"),a("code",{pre:!0},[s._v(".cube-scroll-wrapper")]),s._v("的高度/宽度。这是内容能够滚动的前提条件。"),a("strong",[s._v("如果内容存在图片的情况，可能会出现 DOM 元素渲染时图片还未下载，因此内容元素的高度小于预期，出现滚动不正常的情况。此时你应该在图片加载完成后，比如 onload 事件回调中，手动调用 Scroll 组件的 "),a("code",{pre:!0},[s._v("refresh()")]),s._v(" 方法，它会重新计算滚动距离。")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[a("strong",[s._v("1. 基本使用 - Default")])]),s._v(" "),a("p",[s._v("通过设置 "),a("code",{pre:!0},[s._v("data")]),s._v(" 属性为一个数组，即可生成能够在容器内优雅滚动的列表。完整示例代码在"),a("a",{attrs:{href:"https://github.com/didi/cube-ui/blob/master/example/pages/scroll/default.vue"}},[s._v("这里")]),s._v("。")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scroll-list-wrap"')]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scroll"')]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"items"')]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-stylus"}},[a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".scroll-list-wrap")]),s._v("\n  "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("350px")]),s._v("\n")])]),s._v(" "),a("blockquote",[a("p",[a("strong",[s._v("注意")]),s._v("：由上面的滚动原理可知，这里给滚动容器提供一个固定高度是必须的，同时只有在滚动内容的高度大于容器高度时才可滚动。")])]),s._v(" "),a("p",[s._v("在"),a("code",{pre:!0},[s._v("options")]),s._v("中可以设置滚动条是否可见以及初始滚动位置"),a("code",{pre:!0},[s._v("startY/startX")]),s._v("。")]),s._v(" "),a("p",[s._v("Scroll 组件提供了一个"),a("code",{pre:!0},[s._v("scrollTo()")]),s._v("方法，可以手动控制列表滚动位置。")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-javascript"}},[s._v("scrollTo() {\n  "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.scroll.scrollTo(\n    "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".scrollToY,\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".scrollToTime,\n    ease["),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".scrollToEasing]\n  )\n},\n")])]),s._v(" "),a("p",[s._v("实际上这是一个非常有用的方法，如当我们想要实现“点击不同锚点，列表滚动到相应位置展现不同内容”时，可以使用"),a("code",{pre:!0},[s._v("scrollTo()")]),s._v("方法。")])]),s._v(" "),a("li",[a("p",[a("strong",[s._v("2. 横向滚动 - Horizontal")])]),s._v(" "),a("p",[s._v("Scroll 组件支持横向滚动，只需指定"),a("code",{pre:!0},[s._v('direction="horizontal"')]),s._v("，同时需要添加相应样式如下。完整示例代码在"),a("a",{attrs:{href:"https://github.com/didi/cube-ui/blob/master/example/pages/scroll/horizontal.vue"}},[s._v("这里")]),s._v("。")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scroll"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"items"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("direction")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"horizontal"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"horizontal-scroll-list-wrap"')]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"list-wrapper"')]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in items"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"list-item"')]),s._v(">")]),s._v("{{ item }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-stylus"}},[a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".horizontal-scroll-list-wrap")]),s._v("\n  "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1px")]),s._v(" solid rgba("),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("0.1")]),s._v(")\n  "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("border-radius")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5px")]),s._v("\n  "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".cube-scroll-content")]),s._v("\n    "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": inline-block\n  "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".list-wrapper")]),s._v("\n    "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("padding")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(" "),a("span",{attrs:{class:"hljs-number"}},[s._v("10px")]),s._v("\n    "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("line-height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("60px")]),s._v("\n    "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("white-space")]),s._v(": nowrap\n  "),a("span",{attrs:{class:"hljs-selector-class"}},[s._v(".list-item")]),s._v("\n    "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("display")]),s._v(": inline-block\n")])]),s._v(" "),a("blockquote",[a("p",[a("strong",[s._v("注意")]),s._v("：1. 由上面的滚动原理可知，这里的 CSS 样式设置是必须的，只有在滚动内容的宽度大于容器宽度时才可滚动。2. 有时候我们希望横向滚动使用"),a("code",{pre:!0},[s._v("Scroll")]),s._v("组件来模拟，纵向保留浏览器原生滚动，或者相反的情况。这时你需要传递 better-scroll 配置项 "),a("a",{attrs:{href:"http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html#eventpassthrough"}},[s._v("eventPassthrough")]),s._v("。")])]),s._v(" "),a("p",[s._v("这里对样式的设定做简要的解释，为"),a("code",{pre:!0},[s._v("list-item")]),s._v("元素添加"),a("code",{pre:!0},[s._v("display: inline-block")]),s._v("是希望元素能够不换行，单行显示。"),a("code",{pre:!0},[s._v("list-wrapper")]),s._v("添加"),a("code",{pre:!0},[s._v("white-space: nowrap")]),s._v("是希望遇到父元素边界，依然不换行。另外，关键是"),a("code",{pre:!0},[s._v("cube-scroll-content")]),s._v("元素添加"),a("code",{pre:!0},[s._v("display: inline-block")]),s._v("样式，此时"),a("code",{pre:!0},[s._v("cube-scroll-content")]),s._v("元素的宽度为能够包裹子孙元素的最小宽度，即为连续内联"),a("code",{pre:!0},[s._v("list-item")]),s._v("元素的宽度之和子元素的最大宽度。具有同样性质的样式还有，浮动元素和绝对定位元素，在不设置具体宽度时，其宽度为包裹子孙元素的最小宽度。")])]),s._v(" "),a("li",[a("p",[a("strong",[s._v("3. 自定义内容和上拉刷新下拉加载 - Customized")])]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("Scroll")]),s._v("组件支持通过插槽自定义列表内容和样式。完整示例代码在"),a("a",{attrs:{href:"https://github.com/didi/cube-ui/blob/master/example/pages/scroll/config.vue"}},[s._v("这里")]),s._v("。")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scroll-list-wrap"')]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scroll"')]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"items"')]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@pulling-down")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"onPullingDown"')]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@pulling-up")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"onPullingUp"')]),s._v(">")]),s._v("\n    ... // 自定义内容\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("p",[s._v("Scroll 组件还支持下拉刷新和上拉加载的能力。默认无下拉刷新/上拉加载，可通过"),a("code",{pre:!0},[s._v("options")]),s._v("传递配置项"),a("code",{pre:!0},[s._v("pullDownRefresh")]),s._v("和"),a("code",{pre:!0},[s._v("pullUpLoad")]),s._v("开启相应功能。开启后，下拉时，Scroll 组件会展示默认下拉动画以及派发"),a("code",{pre:!0},[s._v("pulling-down")]),s._v("事件，你可以监听"),a("code",{pre:!0},[s._v("pulling-down")]),s._v("事件更新数据。同理，开启上拉加载后，可通过"),a("code",{pre:!0},[s._v("pulling-up")]),s._v("事件更新数据。")]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("pullDownRefresh")]),s._v("的相关配置有：下拉阈值（threshold）, 回弹位置（stop）, 更新成功文案（txt）和文案显示时间（stopTime）。"),a("code",{pre:!0},[s._v("pullDownRefresh")]),s._v("和"),a("code",{pre:!0},[s._v("pullUpLoad")]),s._v("对象的所有配置项和含义见 "),a("a",{attrs:{href:"#/zh-CN/docs/scroll#cube-Props%E9%85%8D%E7%BD%AE-anchor"}},[s._v("Props 配置")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-javascript"}},[s._v("... "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 省略非核心代码")]),s._v("\ncomputed: {\n  options() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pullDownRefresh")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".pullDownRefreshObj,\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pullUpLoad")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".pullUpLoadObj,\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("scrollbar")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n    }\n  },\n  ...\n},\n"),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n  onPullingDown() {\n    "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 模拟更新数据")]),s._v("\n    setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" ("),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".random() > "),a("span",{attrs:{class:"hljs-number"}},[s._v("0.5")]),s._v(") {\n        "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 如果有新数据")]),s._v("\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".items.unshift(_foods["),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v("])\n      } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n        "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 如果没有新数据")]),s._v("\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.scroll.forceUpdate()\n      }\n    }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(")\n  },\n  onPullingUp() {\n    "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 模拟更新数据")]),s._v("\n    setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" ("),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".random() > "),a("span",{attrs:{class:"hljs-number"}},[s._v("0.5")]),s._v(") {\n        "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 如果有新数据")]),s._v("\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" newPage = _foods.slice("),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(")\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".items = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".items.concat(newPage)\n      } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n        "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// 如果没有新数据")]),s._v("\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.scroll.forceUpdate()\n      }\n    }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(")\n  },\n  ...\n}\n")])]),s._v(" "),a("blockquote",[a("p",[a("strong",[s._v("注意")]),s._v("：如果请求结果没有数据更新，则必须调用 Scroll 组件的"),a("code",{pre:!0},[s._v("forceUpdate()")]),s._v("方法结束此次下拉刷新/上拉加载，这样 Scroll 组件才会开始监听下一次下拉刷新/上拉加载操作。在上例中数据更新时，没有调用"),a("code",{pre:!0},[s._v("forceUpdate()")]),s._v("方法，原因为："),a("strong",[s._v("如果你向"),a("code",{pre:!0},[s._v("Scroll")]),s._v("组件传递了"),a("code",{pre:!0},[s._v("data")]),s._v("属性，那么当"),a("code",{pre:!0},[s._v("Scroll")]),s._v("组件监听到"),a("code",{pre:!0},[s._v("data")]),s._v("有更新时会自行调用"),a("code",{pre:!0},[s._v("forceUpate(true)")]),s._v("方法")]),s._v("，因此推荐传递"),a("code",{pre:!0},[s._v("data")]),s._v("属性。")])])]),s._v(" "),a("li",[a("p",[a("strong",[s._v("4. 自定义下拉刷新动画 - 仿京东 App 首页")])]),s._v(" "),a("p",[s._v("如果你不喜欢内置的下拉刷新和上拉加载动画，还可以用"),a("a",{attrs:{href:"https://cn.vuejs.org/v2/guide/components.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD"}},[s._v("作用域插槽")]),s._v("做自定义动画。Scroll 组件的作用域插槽暴露出的变量非常完善，可以满足绝大多数场景下自定义下拉/上拉动画的需求。下面的例子模仿了京东 App 首页的下拉刷新动画。完整示例代码在"),a("a",{attrs:{href:"https://github.com/didi/cube-ui/blob/master/example/pages/scroll/jd.vue"}},[s._v("这里")]),s._v("。")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scroll"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":scroll-events")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"['scroll']\"")]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scrollOptions"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@scroll")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"onScrollHandle"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@pulling-down")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"onPullingDown"')]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("img")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"http://om0jxp12h.bkt.clouddn.com/jd_content.JPG"')]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"pulldown"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-if")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props.pullDownRefresh"')]),s._v("\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"cube-pulldown-wrapper"')]),s._v("\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"pullDownStyle"')]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"pulldown-content"')]),s._v(">")]),s._v("\n        "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("img")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"http://om0jxp12h.bkt.clouddn.com/pulldow-img.jpg"')]),s._v(">")]),s._v("\n        "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-if")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props.beforePullDown"')]),s._v(">")]),s._v("{{ pullDownTip }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n        "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-else")]),s._v(">")]),s._v("\n          "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-if")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props.isPullingDown"')]),s._v(">")]),s._v("正在更新..."),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-else")]),s._v(">")]),s._v("更新成功"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n        "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-javascript"}},[s._v("data() {\n  "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": {\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("pullDownRefresh")]),s._v(": {\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("threshold")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("60")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("stop")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("40")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("txt")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'更新成功'")]),s._v("\n      }\n    },\n    ...\n  }\n},\n"),a("span",{attrs:{class:"hljs-attr"}},[s._v("computed")]),s._v(": {\n  pullDownTip() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".pullDownY <= "),a("span",{attrs:{class:"hljs-number"}},[s._v("60")]),s._v(") {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'下拉刷新...'")]),s._v("\n    } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".pullDownY <= "),a("span",{attrs:{class:"hljs-number"}},[s._v("90")]),s._v(") {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'继续下拉有惊喜...'")]),s._v("\n    } "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("else")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'松手得惊喜！'")]),s._v("\n    }\n  },\n  headerStyle() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".min("),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Math")]),s._v(".max("),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(" - "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".pullDownY / "),a("span",{attrs:{class:"hljs-number"}},[s._v("40")]),s._v("))\n  }\n},\n"),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n  onScrollHandle(pos) {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".pullDownY = pos.y\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (pos.y > "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(") {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".pullDownStyle = "),a("span",{attrs:{class:"hljs-string"}},[s._v("`top:"),a("span",{attrs:{class:"hljs-subst"}},[s._v("${pos.y}")]),s._v("px`")]),s._v("\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".triggerSurpriseFlag = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".pullDownY > "),a("span",{attrs:{class:"hljs-number"}},[s._v("90")]),s._v(") {\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".triggerSurpriseFlag = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n      }\n    }\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.topHeader.style.opacity = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".headerStyle\n  },\n  onPullingDown() {\n    "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" ("),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".triggerSurpriseFlag) {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".triggerSurprise = "),a("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v("\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.scroll.forceUpdate()\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v("\n    }\n    setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.scroll.forceUpdate()\n    }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(")\n  },\n  ...\n}\n")])]),s._v(" "),a("p",[s._v("通过作用域插槽提供的作用域参数，如："),a("code",{pre:!0},[s._v("beforePulldown")]),s._v("和"),a("code",{pre:!0},[s._v("isPullingDown")]),s._v("，你可以根据状态的变化来控制动画流程，其他作用域参数及其含义详见下面的"),a("a",{attrs:{href:"#/zh-CN/docs/scroll#cube-%E6%8F%92%E6%A7%BD-anchor"}},[s._v("插槽")]),s._v("。在一个完整的下拉刷新过程中，"),a("code",{pre:!0},[s._v("beforePullDown")]),s._v("和"),a("code",{pre:!0},[s._v("isPullingDown")]),s._v("的状态变化如下：")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("流程")]),s._v(" "),a("th",[s._v("beforePulldown")]),s._v(" "),a("th",[s._v("isPullingDown")]),s._v(" "),a("th",[s._v("备注")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("1. 未触发下拉刷新")]),s._v(" "),a("td",[s._v("true")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("展示继续下拉引导图案")])]),s._v(" "),a("tr",[a("td",[s._v("2. 触发下拉刷新")]),s._v(" "),a("td",[s._v("false")]),s._v(" "),a("td",[s._v("true")]),s._v(" "),a("td",[s._v("异步请求数据，显示 loading")])]),s._v(" "),a("tr",[a("td",[s._v("3. 获取数据成功")]),s._v(" "),a("td",[s._v("false")]),s._v(" "),a("td",[s._v("false")]),s._v(" "),a("td",[s._v("调用 "),a("code",{pre:!0},[s._v("forceUpdate(true)")]),s._v(", 显示成功文案, 延迟 stopTime 时间进入步骤 4")])]),s._v(" "),a("tr",[a("td",[s._v("4. 下拉刷新完成")]),s._v(" "),a("td",[s._v("true")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])])])])]),s._v(" "),a("li",[a("p",[a("strong",[s._v("5. 高级使用 - 仿头条 App 首页")])]),s._v(" "),a("p",[s._v("Scroll 组件能够满足绝大多数移动端应用的滚动需求。本例中通过横向和纵向的两个 Scroll 组件快速实现了模仿头条 App 首页的滚动体验。完整的示例代码在"),a("a",{attrs:{href:"https://github.com/didi/cube-ui/blob/master/example/pages/scroll/toutiao.vue"}},[s._v("这里")]),s._v("。")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"nav-scroll-list-wrap"')]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"navScroll"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("direction")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"horizontal"')]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"nav-wrapper"')]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in navTxts"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"index"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"nav-item"')]),s._v(">")]),s._v("{{ item }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"more-wrapper"')]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"more"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"content-scroll-wrapper"')]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"content-scroll-list-wrap"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scrollWrapper"')]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v("\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"contentScroll"')]),s._v("\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"content"')]),s._v("\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v("\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@pulling-down")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"onPullingDown"')]),s._v("\n      "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@pulling-up")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"onPullingUp"')]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"imgs-wrapper"')]),s._v(">")]),s._v("\n        "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in content"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"index"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"imgs-item"')]),s._v(">")]),s._v("\n          "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("img")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.url"')]),s._v(">")]),s._v("\n        "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"pulldown"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v(">")]),s._v("\n        "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-if")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props.pullDownRefresh"')]),s._v("\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"cube-pulldown-wrapper"')]),s._v("\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props.pullDownStyle"')]),s._v(">")]),s._v("\n          "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-if")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props.beforePullDown"')]),s._v("\n            "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"before-trigger"')]),s._v("\n            "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":style")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v("\"{paddingTop: props.bubbleY + 'px'}\"")]),s._v(">")]),s._v("\n            "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"{rotate: props.bubbleY > options.pullDownRefresh.threshold - 60}"')]),s._v(">")]),s._v("↓"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n          "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"after-trigger"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-else")]),s._v(">")]),s._v("\n            "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"props.isPullingDown"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"loading"')]),s._v(">")]),s._v("\n              "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-loading")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-loading")]),s._v(">")]),s._v("\n            "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n            "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("name")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"success"')]),s._v(">")]),s._v("\n              "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-show")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"!props.isPullingDown"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"text-wrapper"')]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"refresh-text"')]),s._v(">")]),s._v("今日头条推荐引擎有x条更新"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n            "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("transition")]),s._v(">")]),s._v("\n          "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n        "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("p",[s._v("和“仿京东 APP”示例不同的是，在下拉刷新的自定义动画中，使用了"),a("code",{pre:!0},[s._v("pulldown")]),s._v("作用域插槽中的"),a("code",{pre:!0},[s._v("pullDownStyle")]),s._v("和"),a("code",{pre:!0},[s._v("bubbleY")]),s._v("更方便的实现下拉动画。")]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("pullDownStyle")]),s._v("用来控制下拉内容的位置，值为字符串"),a("code",{pre:!0},[s._v("top: n px")]),s._v("（n 代表数值）。Scroll 组件是通过绝对定位的"),a("code",{pre:!0},[s._v("top")]),s._v("值来控制下拉内容位置的。初始状态"),a("code",{pre:!0},[s._v("top")]),s._v("值为负值，大小刚好为下拉内容的高度，因此下拉内容被隐藏到滚动区域上方，当下拉过程中，Scroll 组件会逐渐增大"),a("code",{pre:!0},[s._v("top")]),s._v("值，实时更新下拉内容的位置。"),a("code",{pre:!0},[s._v("top")]),s._v("最大值为0，即当下拉内容完全显示后"),a("code",{pre:!0},[s._v("top")]),s._v("值不再增加。即 "),a("code",{pre:!0},[s._v("pullY - height <= top <= 0")]),s._v("。（pullY 为下拉距离，height 为下拉内容高度）")]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("bubbleY")]),s._v("用来辅助实现自定义动画。在默认动画中，"),a("code",{pre:!0},[s._v("bubbleY")]),s._v("用来控制气泡尾巴长度；在头条例子中，用来控制箭头的"),a("code",{pre:!0},[s._v("padding-top")]),s._v("值，间接控制箭头位置。"),a("code",{pre:!0},[s._v("bubbleY")]),s._v("的最小值为 0，下拉过程中，当下拉距离大于下拉内容高度后，"),a("code",{pre:!0},[s._v("bubbleY")]),s._v("开始增大。即 "),a("code",{pre:!0},[s._v("0 <= bubbleY <= pullY - height")]),s._v("。")]),s._v(" "),a("blockquote",[a("p",[s._v("在本例中，"),a("code",{pre:!0},[s._v("pullDownRefresh")]),s._v("配置项没有传入"),a("code",{pre:!0},[s._v("stop")]),s._v("值，但是下拉后依然能够回弹到正确位置，原因是 Scroll 组件初始化时会将 "),a("code",{pre:!0},[s._v("beforePullDown === false && isPullingDown === true")]),s._v(" 时下拉内容高度作为 "),a("code",{pre:!0},[s._v("stop")]),s._v(" 默认值。")])])]),s._v(" "),a("li",[a("p",[a("strong",[s._v("6. 嵌套纵向滚动 - Vertical Scrolls")]),a("sup",[s._v("1.11.0")])]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("Scroll")]),s._v("组件还支持嵌套的场景(目前只支持两层嵌套)。值得庆祝的是，对于你不需要做任何工作，只需要像平时使用"),a("code",{pre:!0},[s._v("Scroll")]),s._v("组件一样即可。"),a("code",{pre:!0},[s._v("Scroll")]),s._v("组件会自行判断是否有嵌套情况，同时处理嵌套滚动问题。默认情况下，嵌套"),a("code",{pre:!0},[s._v("Scroll")]),s._v("与浏览器原生嵌套场景的滚动行为相同。下面是"),a("code",{pre:!0},[s._v("Scroll")]),s._v("组件实现纵向嵌套滚动的例子。完整的示例代码在这里"),a("a",{attrs:{href:"https://github.com/didi/cube-ui/blob/master/example/pages/scroll/vertical-scrolls.vue"}},[s._v("这里")]),s._v("。")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scroll1"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scroll-list-outer-wrap"')]),s._v(">")]),s._v("\n  ...\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scroll2"')]),s._v("\n    "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scroll-list-inner-wrap"')]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"cube-scroll-list"')]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"cube-scroll-item border-bottom-1px"')]),s._v("\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"(item, index) in items2"')]),s._v("\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"index"')]),s._v(">")]),s._v("{{item}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v(">")]),s._v("\n  ...\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v(">")]),s._v("\n")])])]),s._v(" "),a("li",[a("p",[a("strong",[s._v("7. 嵌套横向滚动 - Horizontal Scrolls")]),a("sup",[s._v("1.11.0")])]),s._v(" "),a("p",[s._v("你还可以实现横向的嵌套滚动。这里同时设置"),a("code",{pre:!0},[s._v("nestMode")]),s._v("为"),a("code",{pre:!0},[s._v("free")]),s._v("，与"),a("code",{pre:!0},[s._v("native")]),s._v("模式不同的是，"),a("code",{pre:!0},[s._v("free")]),s._v("模式下，内层滚动过程中只要触发边界，便会开启外层滚动。而"),a("code",{pre:!0},[s._v("native")]),s._v("模式下，只在开始滚动时判断是否到达边界，与浏览器原生的嵌套滚动保持一致。完整的示例代码在"),a("a",{attrs:{href:"https://github.com/didi/cube-ui/blob/master/example/pages/scroll/horizontal-scrolls.vue"}},[s._v("这里")]),s._v("。")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scroll"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"items1"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("direction")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"horizontal"')]),s._v("\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"outer-horizontal-scroll"')]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"list-wrapper"')]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in items1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"list-item"')]),s._v(">")]),s._v("{{ item }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"list-item inner-horizontal-scroll"')]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v("\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"scroll"')]),s._v("\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"items2"')]),s._v("\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("direction")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"horizontal"')]),s._v("\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("nest-mode")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"free"')]),s._v(">")]),s._v("\n        "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"list-wrapper"')]),s._v(">")]),s._v("\n          "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in items2"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"list-item"')]),s._v(">")]),s._v("{{ item }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n        "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n      "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n    "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in items1"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"list-item"')]),s._v(">")]),s._v("{{ item }}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n  "),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v(">")]),s._v("\n")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")]),s._v(" "),a("th",[s._v("可选值")]),s._v(" "),a("th",[s._v("默认值")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("data")]),s._v(" "),a("td",[s._v("用于列表渲染的数据")]),s._v(" "),a("td",[s._v("Array")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("[]")])]),s._v(" "),a("tr",[a("td",[s._v("direction")]),s._v(" "),a("td",[s._v("滚动方向")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("'vertical', 'horizontal'")]),s._v(" "),a("td",[s._v("'vertical'")])]),s._v(" "),a("tr",[a("td",[s._v("options")]),s._v(" "),a("td",[s._v("better-scroll 配置项，具体请参考"),a("a",{attrs:{href:"https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html"}},[s._v("BS 官方文档")])]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("{"),a("br"),s._v("  observeDOM: true,"),a("br"),s._v("  click: true,"),a("br"),s._v("  probeType: 1,"),a("br"),s._v("  scrollbar: false,"),a("br"),s._v("  pullDownRefresh: false,"),a("br"),s._v("  pullUpLoad: false"),a("br"),s._v("}")])]),s._v(" "),a("tr",[a("td",[s._v("scrollEvents"),a("sup",[s._v("1.9.0")])]),s._v(" "),a("td",[s._v("配置需要派发的 scroll 事件")]),s._v(" "),a("td",[s._v("Array")]),s._v(" "),a("td",[s._v("可包含子项：'scroll', 'before-scroll-start', 'scroll-end'")]),s._v(" "),a("td",[s._v("[]")])]),s._v(" "),a("tr",[a("td",[s._v("listenScroll")]),s._v(" "),a("td",[s._v("是否派发 scroll 事件。"),a("code",{pre:!0},[s._v("即将废弃")]),s._v("，推荐使用 "),a("code",{pre:!0},[s._v("scroll-events")]),s._v(" 属性")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("listenBeforeScroll")]),s._v(" "),a("td",[s._v("是否派发 before-scroll-start 事件。"),a("code",{pre:!0},[s._v("即将废弃")]),s._v("，推荐使用 "),a("code",{pre:!0},[s._v("scroll-events")]),s._v(" 属性")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("false")])]),s._v(" "),a("tr",[a("td",[s._v("refreshDelay")]),s._v(" "),a("td",[s._v("data属性的数据更新后，scroll 的刷新延时")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("20")])]),s._v(" "),a("tr",[a("td",[s._v("nestMode"),a("sup",[s._v("1.11.0")])]),s._v(" "),a("td",[s._v("嵌套滚动模式，默认是"),a("code",{pre:!0},[s._v("native")]),s._v("模式，只在开始滚动时判断是否到达边界并开启外层滚动，与浏览器原生的嵌套滚动保持一致。"),a("code",{pre:!0},[s._v("free")]),s._v("模式下，内层滚动过程中只要触发边界，便会开启外层滚动。")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("'native', 'free'")]),s._v(" "),a("td",[s._v("'native'")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("options")]),s._v("中 better-scroll 的几个常用配置项，"),a("code",{pre:!0},[s._v("scrollbar")]),s._v("、"),a("code",{pre:!0},[s._v("pullDownRefresh")]),s._v("、"),a("code",{pre:!0},[s._v("pullUpLoad")]),s._v("这三个配置即可设为 "),a("code",{pre:!0},[s._v("Boolean")]),s._v("（"),a("code",{pre:!0},[s._v("false")]),s._v(" 关闭该功能，"),a("code",{pre:!0},[s._v("true")]),s._v(" 开启该功能，并使用默认子配置），也可设为"),a("code",{pre:!0},[s._v("Object")]),s._v("，开启该功能并具体定制其子配置项。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("scrollbar")]),s._v(" 子配置项")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")]),s._v(" "),a("th",[s._v("可选值")]),s._v(" "),a("th",[s._v("默认值")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("fade")]),s._v(" "),a("td",[s._v("是否淡入淡出")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("pullDownRefresh")]),s._v(" 子配置项")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")]),s._v(" "),a("th",[s._v("可选值")]),s._v(" "),a("th",[s._v("默认值")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("threshold")]),s._v(" "),a("td",[s._v("下拉刷新动作的下拉距离阈值")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("90")])]),s._v(" "),a("tr",[a("td",[s._v("stop")]),s._v(" "),a("td",[s._v("回弹停留的位置")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("组件会自动计算回弹时显示的元素高度作为默认值")])]),s._v(" "),a("tr",[a("td",[s._v("stopTime")]),s._v(" "),a("td",[s._v("刷新成功的文案显示时间")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("600")])]),s._v(" "),a("tr",[a("td",[s._v("txt")]),s._v(" "),a("td",[s._v("刷新成功的文案")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("'Refresh success'")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("pullUpLoad")]),s._v(" 子配置项")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("参数")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("类型")]),s._v(" "),a("th",[s._v("可选值")]),s._v(" "),a("th",[s._v("默认值")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("threshold")]),s._v(" "),a("td",[s._v("上拉刷新动作的上拉距离阈值")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("0")])]),s._v(" "),a("tr",[a("td",[s._v("txt")]),s._v(" "),a("td",[s._v("上拉加载的相关文案")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("{ more: '', noMore: '' }")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("名字")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("作用域参数")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("default")]),s._v(" "),a("td",[s._v("基于"),a("code",{pre:!0},[s._v("data")]),s._v("属性渲染的列表")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("pulldown")]),s._v(" "),a("td",[s._v("位于列表上方，会在下拉刷新时显示")]),s._v(" "),a("td",[s._v("pullDownRefresh: 是否开启了下拉刷新功能 "),a("br"),s._v(" pullDownStyle: 移入移出的样式 "),a("br"),s._v(" beforePullDown: 是否正在做下拉操作 "),a("br"),s._v(" isPullingDown: 是否正在拉取数据 "),a("br"),s._v(" bubbleY: 当前下拉的距离 - 50")])]),s._v(" "),a("tr",[a("td",[s._v("pullup")]),s._v(" "),a("td",[s._v("位于列表下方，会在上拉加载时显示")]),s._v(" "),a("td",[s._v("pullUpLoad: 是否开启了上拉加载功能 "),a("br"),s._v(" isPullUpLoad: 是否正在加载数据")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("事件名")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("参数")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("click")]),s._v(" "),a("td",[s._v("点击列表项时触发")]),s._v(" "),a("td",[s._v("item - 该列表项的数据")])]),s._v(" "),a("tr",[a("td",[s._v("scroll")]),s._v(" "),a("td",[s._v("当 "),a("code",{pre:!0},[s._v("scroll-events")]),s._v(" 包含 "),a("code",{pre:!0},[s._v("scroll")]),s._v(" 时，根据 probeType 的值决定派发时机")]),s._v(" "),a("td",[s._v("Object {x, y} - 实时滚动位置的坐标")])]),s._v(" "),a("tr",[a("td",[s._v("before-scroll-start")]),s._v(" "),a("td",[s._v("当 "),a("code",{pre:!0},[s._v("scroll-events")]),s._v(" 包含 "),a("code",{pre:!0},[s._v("before-scroll-start")]),s._v(" 时，在滚动开始之前触发")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("scroll-end"),a("sup",[s._v("1.9.0")])]),s._v(" "),a("td",[s._v("当 "),a("code",{pre:!0},[s._v("scroll-events")]),s._v(" 包含 "),a("code",{pre:!0},[s._v("scroll-end")]),s._v(" 时，在滚动结束时触发")]),s._v(" "),a("td",[s._v("Object {x, y} - 实时滚动位置的坐标")])]),s._v(" "),a("tr",[a("td",[s._v("pulling-down")]),s._v(" "),a("td",[s._v("当 pullDownRefresh 属性为 true 时，在下拉超过阈值时触发")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("pulling-up")]),s._v(" "),a("td",[s._v("当 pullUpLoad 属性为 true 时，在上拉超过阈值时触发")]),s._v(" "),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("方法名")]),s._v(" "),a("th",[s._v("说明")]),s._v(" "),a("th",[s._v("参数")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("scrollTo")]),s._v(" "),a("td",[s._v("滚动到指定位置")]),s._v(" "),a("td",[s._v("x: 横向位置"),a("br"),s._v(" y: 纵向位置"),a("br"),s._v(" time: 过渡动画时间"),a("br"),s._v(" ease: 动画曲线")])]),s._v(" "),a("tr",[a("td",[s._v("forceUpdate")]),s._v(" "),a("td",[s._v("标记上拉下拉结束，强制重新计算可滚动距离")]),s._v(" "),a("td",[s._v("dirty: 是否有数据更新，默认为 false。true 表示有数据更新重新计算可滚动距离，上拉文案显示"),a("code",{pre:!0},[s._v("pullUpLoad.text.more")]),s._v("值，false 表示没有数据更新，无需重新计算, 上拉文案显示"),a("code",{pre:!0},[s._v("pullUpLoad.text.nomore")]),s._v("值")])]),s._v(" "),a("tr",[a("td",[s._v("disable")]),s._v(" "),a("td",[s._v("禁用滚动")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("enable")]),s._v(" "),a("td",[s._v("启用滚动，默认是开启滚动的。")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("resetPullUpTxt")]),s._v(" "),a("td",[s._v("当从无更多切换到有更多时，重置上拉文本内容")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("refresh")]),s._v(" "),a("td",[s._v("刷新，重新计算高度且刷新 BetterScroll 实例")]),s._v(" "),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("属性名")]),s._v(" "),a("th",[s._v("说明")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("scroll")]),s._v(" "),a("td",[s._v("可以通过该属性获得内部实现滚动核心的 BScoll 实例，从而获得更多 BScoll 的底层能力，如监听"),a("code",{pre:!0},[s._v("touchEnd")]),s._v("事件，获得滚动中的中间状态等，具体可查看"),a("a",{attrs:{href:"http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/"}},[s._v(" better-scroll 文档")])])])])])}]}},kegs:function(s,t,a){s.exports=a("/Z59")}});