webpackJsonp([61],{SKvU: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:"Scrollingprinciple"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Scrollingprinciple-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(" Scrolling principle")]),s._v(" "),a("p",[s._v("The better-scroll's scrolling principle is, the length of the first child element exceeds the length of the container in the scroll direction.")]),s._v(" "),s._m(1),s._v(" "),s._m(2),s._v(" "),s._m(3),s._v(" "),a("h3",{attrs:{id:"Example"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Example-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(" Example")]),s._v(" "),a("p",[s._v("Five sample code to quickly understand how to use the Scroll component.")]),s._v(" "),s._m(4),s._v(" "),s._m(5),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(" "),a("h3",{attrs:{id:"Propsconfiguration"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Propsconfiguration-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 configuration")]),s._v(" "),s._m(11),s._v(" "),s._m(12),s._v(" "),s._m(13),s._v(" "),s._m(14),s._v(" "),s._m(15),s._v(" "),s._m(16),s._v(" "),s._m(17),s._v(" "),s._m(18),s._v(" "),a("h3",{attrs:{id:"Slot"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Slot-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(" Slot")]),s._v(" "),s._m(19),s._v(" "),a("h3",{attrs:{id:"Events"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Events-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(" Events")]),s._v(" "),s._m(20),s._v(" "),a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-methods-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(" methods")]),s._v(" "),s._m(21)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("Scroll")]),s._v(" component, which is encapsulated based on "),a("code",{pre:!0},[s._v("better-scroll")]),s._v(", provides high-quality native scrolling experience and has convenient configuration along with events.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("So for the Scroll component, The length of "),a("code",{pre:!0},[s._v(".cube-scroll-content")]),s._v(", the scroll-content, must be larger than "),a("code",{pre:!0},[s._v(".cube-scroll-wrapper")]),s._v(", the container element. Depending on the direction of scrolling, there are two situations:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("1）Scrolling vertically: "),a("strong",[s._v("The height of the content element must be greater than the container element.")]),s._v(" Since the height of the container element will be stretched by the height of the child element by default, in order to satisfy our scrolling premise, you need to give the Scroll component's "),a("code",{pre:!0},[s._v(".cube-scroll-wrapper")]),s._v(" element an fixed height.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("2）Scrolling horizontally: "),a("strong",[s._v("The width of the content element must be greater than the container element.")]),s._v(" Since the child element's width does not exceed the container element by default, the Scroll component's "),a("code",{pre:!0},[s._v(".cube-scroll-content")]),s._v(" element needs to be set to a width greater than the "),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("ul",[a("li",[a("p",[a("strong",[s._v("Basic usage - Default")])]),s._v(" "),a("p",[s._v("By setting the data property to an array, you can generate an elegantly scrolling list. The complete sample code is "),a("a",{attrs:{href:"https://github.com/didi/cube-ui/blob/master/example/pages/scroll/default.vue"}},[s._v("here")]),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("Note")]),s._v(": As the scrolling principle above, it is necessary to provide a fixed height to the scroll container, and scroll only when the height of the scroll content is greater than the height of the container.")])]),s._v(" "),a("p",[s._v("In the prop "),a("code",{pre:!0},[s._v("options")]),s._v(", you are able to control the scroll bar seen or not via "),a("code",{pre:!0},[s._v("scrollbar")]),s._v(", and configure the initial position by "),a("code",{pre:!0},[s._v("startX/startY")]),s._v(".")]),s._v(" "),a("p",[s._v("Scroll component provide a "),a("code",{pre:!0},[s._v("scrollTo()")]),s._v(" method that allows you to manually control the list scroll position.")]),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('In fact, this is a very useful method, such as when we want to achieve "click different anchor, list scroll to the corresponding position to show different content", you can use the '),a("code",{pre:!0},[s._v("scrollTo ()")]),s._v(" method.")])]),s._v(" "),a("li",[a("p",[a("strong",[s._v("Scrolling horizontally - Horizontal")])]),s._v(" "),a("p",[s._v("Scroll component support horizontal scrolling by specifying "),a("code",{pre:!0},[s._v("direction = 'horizental'")]),s._v(". The complete sample code is "),a("a",{attrs:{href:"https://github.com/didi/cube-ui/blob/master/example/pages/scroll/horizontal.vue"}},[s._v("here")])]),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('"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("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("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('"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"),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(".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("Note")]),s._v("：As the scrolling principle above, the CSS style setting here is required, and scrolling is possible only when the scrolling content is wider than the container width.")])])]),s._v(" "),a("li",[a("p",[a("strong",[s._v("Custom content - Customized")])]),s._v(" "),a("p",[s._v("The Scroll component supports the customization of list content through default slot. The complete sample code is "),a("a",{attrs:{href:"https://github.com/didi/cube-ui/blob/master/example/pages/scroll/config.vue"}},[s._v("here")]),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(":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    ... // custom content\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 components also support "),a("strong",[s._v("pull-down refresh")]),s._v(" and "),a("strong",[s._v("pull-up load")]),s._v(" capabilities. By default, there is no pulldown refresh/pullup load. You can enable corresponding functions by "),a("code",{pre:!0},[s._v("pullDownRefresh")]),s._v(" and "),a("code",{pre:!0},[s._v("pullUpLoad")]),s._v(". After opening, when pulling down, the Scroll component will show the default pulldown animation and dispatch pulldown events. You can monitor the "),a("code",{pre:!0},[s._v("pull-down")]),s._v(" event to update the data. Similarly, after the pull-up load is enabled, the data can be updated by the "),a("code",{pre:!0},[s._v("pull-up")]),s._v(" event.")]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("pullDownRefresh")]),s._v("'s related configurations include: drop threshold (threshold), rebound position (stop), update successful copy (txt) and copy display time (stopTime). See the "),a("a",{attrs:{href:"#/en-US/docs/scroll#cube-Propsconfiguration-anchor"}},[s._v("Props configuration")]),s._v(" for all the configuration items and meanings of the "),a("code",{pre:!0},[s._v("pullDownRefresh")]),s._v(" and "),a("code",{pre:!0},[s._v("pullUpLoad")]),s._v(" objects.")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-javascript"}},[s._v("... "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ignore ")]),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("// simulate asynchronous request data")]),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("// if data update")]),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("// if no data update")]),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("// simulate asynchronous request data")]),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("// if data update")]),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("// if no data update")]),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("Note")]),s._v(": If a pulldown refresh has no data update, you must manually call the Scroll component's "),a("code",{pre:!0},[s._v("forceUpdate()")]),s._v(" method to end the pulldown refresh so that Scroll will restart listening for the next pulldown refresh operation. When the data is updated, the Scroll component will invoke "),a("code",{pre:!0},[s._v("forceUpate()")]),s._v(" method internally.")])])]),s._v(" "),a("li",[a("p",[a("strong",[s._v("Custom pull-down refresh animation - Fake JD App")])]),s._v(" "),a("p",[s._v("If you don't like the built-in pull-down refresh and pull-up loading animations, you can also use the scope slots for custom animations. The variables exposed by "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots"}},[s._v("the scoped slots")]),s._v(" of the Scroll component are perfect to meet the needs of custom pull-down/pull-up animations in most scenarios. The following example imitates the pull-down refresh animation of Jingdong App's homepage. The complete sample code is "),a("a",{attrs:{href:"https://github.com/didi/cube-ui/blob/master/example/pages/scroll/jd.vue"}},[s._v("here")]),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("Through the scope parameters provided by the scoped slots, such as: "),a("code",{pre:!0},[s._v("beforePulldown")]),s._v(" and "),a("code",{pre:!0},[s._v("isPullingDown")]),s._v(", allows you control the animation process. Tht other scope parameters, see "),a("a",{attrs:{href:"#/en-US/docs/scroll#cube-Slot-anchor"}},[s._v("slots")]),s._v(". In a complete pulldown refresh, the status of "),a("code",{pre:!0},[s._v("beforePullDown")]),s._v(" and "),a("code",{pre:!0},[s._v("isPullingDown")]),s._v(" changes as follows:")]),s._v(" "),a("table",[a("thead",[a("tr",[a("th",[s._v("step")]),s._v(" "),a("th",[s._v("beforePulldown")]),s._v(" "),a("th",[s._v("isPullingDown")]),s._v(" "),a("th",[s._v("note")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("1. Untrigger pull-down refresh")]),s._v(" "),a("td",[s._v("true")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("Show pattern guide user continues to  pull down")])]),s._v(" "),a("tr",[a("td",[s._v("2. Trigger pull-down refresh")]),s._v(" "),a("td",[s._v("false")]),s._v(" "),a("td",[s._v("true")]),s._v(" "),a("td",[s._v("Asynchronous request data，show loading")])]),s._v(" "),a("tr",[a("td",[s._v("3. Request data success")]),s._v(" "),a("td",[s._v("false")]),s._v(" "),a("td",[s._v("false")]),s._v(" "),a("td",[s._v("invoke "),a("code",{pre:!0},[s._v("forceUpdate()")]),s._v(", show success copy")])]),s._v(" "),a("tr",[a("td",[s._v("4. A pull-down refresh complete")]),s._v(" "),a("td",[s._v("true")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("after invoke "),a("code",{pre:!0},[s._v("forceUpdate()")]),s._v(", delay stopTime to step 4")])])])])]),s._v(" "),a("li",[a("p",[a("strong",[s._v("Advanced usage - Fake TouTiao App")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Scroll components can meet the scrolling needs of most mobile applications. In this example, using two Scroll components, one  vertical and one horizontal, to imitates the Toutiao App's home page. The complete sample code is "),a("a",{attrs:{href:"https://github.com/didi/cube-ui/blob/master/example/pages/scroll/toutiao.vue"}},[s._v("here")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[s._v("  "),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")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In contrast to faking JD App example, pulldown refreshing custom animations use "),a("code",{pre:!0},[s._v("pullDownStyle")]),s._v(" and "),a("code",{pre:!0},[s._v("bubbleY")]),s._v(" in pulldown scope slots to facilitate pulldown animations.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",{pre:!0},[s._v("pullDownStyle")]),s._v(" is used to control the position of the pull-down content. The value is the string "),a("code",{pre:!0},[s._v("top: n px")]),s._v(" (n represents a number). The Scroll component controls the position of the pull-down content via the absolutely positioned "),a("code",{pre:!0},[s._v("top")]),s._v(" value. The initial state has a negative "),a("code",{pre:!0},[s._v("top")]),s._v(" value, and the value is just the height of the pull-down content, so the drop-down content is hidden above the scroll area. When the pull-down process is started, the Scroll component will gradually increase the "),a("code",{pre:!0},[s._v("top")]),s._v(" value and update the pull-down content position in real time. The maximum value of "),a("code",{pre:!0},[s._v("top")]),s._v(" is 0, that is, the "),a("code",{pre:!0},[s._v("top")]),s._v(" value no longer increases when the pull-down content is completely displayed. So, "),a("code",{pre:!0},[s._v("pullY - height <= top <= 0")]),s._v(". (pullY is the drop-down distance, height is the drop-down content height)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",{pre:!0},[s._v("bubbleY")]),s._v(" is used to help implement custom animations. In the default animation, "),a("code",{pre:!0},[s._v("bubbleY")]),s._v(" is used to control the length of the bubble tail; in the Toutiao example, is used to control the padding-top value of the arrow, to indirectly control the arrow position. The minimum value of "),a("code",{pre:!0},[s._v("bubbleY")]),s._v(" is 0. In the pull-down process, when the pull-down distance is greater than the height of the pull-down content, "),a("code",{pre:!0},[s._v("bubbleY")]),s._v(" starts to increase. That is, "),a("code",{pre:!0},[s._v("0 <= bubbleY <= pullY - height")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("blockquote",[a("p",[a("strong",[s._v("Note:")]),s._v(" In this example, the "),a("code",{pre:!0},[s._v("pullDownRefresh")]),s._v(" configuration item does not have a "),a("code",{pre:!0},[s._v("stop")]),s._v(" value, but it is still able to bounce back to the correct location after the pulldown. The reason is that when the Scroll component is initialized, the pulldown height will be used as the "),a("code",{pre:!0},[s._v("stop")]),s._v(" default value when "),a("code",{pre:!0},[s._v("beforePullDown === false && isPullingDown === true")]),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("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Accepted Values")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("data")]),s._v(" "),a("td",[s._v("data used for list rendering")]),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("scrolling direction")]),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("the options of better-scroll, you could find details at "),a("a",{attrs:{href:"https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html"}},[s._v("BS Document")])]),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("configure which scroll events need be triggered")]),s._v(" "),a("td",[s._v("Array")]),s._v(" "),a("td",[s._v("could include: '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("whether to dispatch scroll event. "),a("code",{pre:!0},[s._v("Deprecated")]),s._v(", please use the property "),a("code",{pre:!0},[s._v("scroll-events")]),s._v(" instead.")]),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("whether to dispatch  before-scroll-start event. "),a("code",{pre:!0},[s._v("Deprecated")]),s._v(", please use the property "),a("code",{pre:!0},[s._v("scroll-events")]),s._v(" instead.")]),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("the delay of scroll refresh after "),a("code",{pre:!0},[s._v("data")]),s._v(" updating")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("20")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In "),a("code",{pre:!0},[s._v("options")]),s._v(", there are three frequently-used options, "),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(", which could set as "),a("code",{pre:!0},[s._v("Boolean")]),s._v("("),a("code",{pre:!0},[s._v("false")]),s._v(" to disable the feature, "),a("code",{pre:!0},[s._v("true")]),s._v(" to enable the feature and use default sub configuration), or "),a("code",{pre:!0},[s._v("Object")]),s._v(" to enable the feature and customize the sub configuration.")])},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(" sub configuration")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Accepted Values")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("fade")]),s._v(" "),a("td",[s._v("whether to have fade-in-fade-out style")]),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(" sub configuration")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Accepted Values")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("threshold")]),s._v(" "),a("td",[s._v("the threshold of  distance that pulling down for  refreshing")]),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("the position where rebounding stays")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("Scroll component will calculate the height of pulldown element as default "),a("code",{pre:!0},[s._v("stop")]),s._v(" value")])]),s._v(" "),a("tr",[a("td",[s._v("stopTime")]),s._v(" "),a("td",[s._v("the time that keep showing the text of refreshing success")]),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("the text shown when refreshing successfully")]),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(" sub configuration")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Accepted Values")]),s._v(" "),a("th",[s._v("Default")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("threshold")]),s._v(" "),a("td",[s._v("the threshold of  distance that pulling up for  loading")]),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("the text shown when pulling up loading")]),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("Name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Scope Parameters")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("default")]),s._v(" "),a("td",[s._v("the list, rendering based on the value of property "),a("code",{pre:!0},[s._v("data")])]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("pulldown")]),s._v(" "),a("td",[s._v("located above the list and shown when pulling down refreshing")]),s._v(" "),a("td",[s._v("pullDownRefresh: whether to turn on pulling-down-refreshing function"),a("br"),s._v("pullDownStyle: the style of showing and fading"),a("br"),s._v("beforePullDown: whether in pulling down operation"),a("br"),s._v("isPullingDown: whether in the process of pulling in data"),a("br"),s._v("bubbleY: the distance of pulling down currently - 50")])]),s._v(" "),a("tr",[a("td",[s._v("pullup")]),s._v(" "),a("td",[s._v("located below the list and shown when pulling up loading")]),s._v(" "),a("td",[s._v("pullUpLoad: whether to turn on pulling-up-loading function"),a("br"),s._v("isPullUpLoad: whether the data is being loaded")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Event Name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Parameters")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("click")]),s._v(" "),a("td",[s._v("triggers when clicking the list item")]),s._v(" "),a("td",[s._v("item - the data of the list item")])]),s._v(" "),a("tr",[a("td",[s._v("scroll")]),s._v(" "),a("td",[s._v("if "),a("code",{pre:!0},[s._v("scroll-events")]),s._v(" includes "),a("code",{pre:!0},[s._v("scroll")]),s._v(", it will be triggered according to the value of probeType, if listenScroll is true")]),s._v(" "),a("td",[s._v("Object {x, y} - real-time scrolling coordinates")])]),s._v(" "),a("tr",[a("td",[s._v("before-scroll-start")]),s._v(" "),a("td",[s._v("if "),a("code",{pre:!0},[s._v("scroll-events")]),s._v(" includes "),a("code",{pre:!0},[s._v("before-scroll-start")]),s._v(", it will be triggered before scrolling start")]),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("if "),a("code",{pre:!0},[s._v("scroll-events")]),s._v(" includes "),a("code",{pre:!0},[s._v("scroll-end")]),s._v(", it will be triggered when scroll end.")]),s._v(" "),a("td",[s._v("Object {x, y} - real-time scrolling coordinates")])]),s._v(" "),a("tr",[a("td",[s._v("pulling-down")]),s._v(" "),a("td",[s._v("triggers when the distance of pulling down exceeds the threshold, if pullDownRefresh is true")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("pulling-up")]),s._v(" "),a("td",[s._v("triggers when the distance of pulling up exceeds the threshold, if pullUpLoad is 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("Method Name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Parameters")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("scrollTo")]),s._v(" "),a("td",[s._v("Scroll to specific position.")]),s._v(" "),a("td",[s._v("x: horizontal position"),a("br"),s._v(" y: vertical position"),a("br"),s._v(" time: transition time"),a("br"),s._v(" ease: easing function")])]),s._v(" "),a("tr",[a("td",[s._v("disable")]),s._v(" "),a("td",[s._v("Disable scroll.")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("enable")]),s._v(" "),a("td",[s._v("Enable scroll. It's enabled by default")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("forceUpdate")]),s._v(" "),a("td",[s._v("If a pulldown/pullup refresh has no data update, you should call "),a("code",{pre:!0},[s._v("forceUpdate()")]),s._v(" method to force update pullUp/pullDown state")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("resetPullUpTxt")]),s._v(" "),a("td",[s._v("Reset pull up txt when pull up state changed from no data to data updated")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("refresh")]),s._v(" "),a("td",[s._v("Refresh, computed height and called BetterScroll instance's refresh")]),s._v(" "),a("td",[s._v("-")])])])])}]}},a6IA:function(s,t,a){s.exports=a("nez3")},nez3:function(s,t,a){var l=a("VU/8")(null,a("SKvU"),null,null,null);s.exports=l.exports}});