webpackJsonp([51],{a6IA:function(s,t,a){s.exports=a("nez3")},aK8u:function(s,t){s.exports={render:function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("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:"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(""),s._m(1),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(2),s._v(""),s._m(3),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(""),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(10),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(11)])},staticRenderFns:[function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("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 tith events.")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("ul",[a("li",[a("p",[s._v("Basic usage")]),s._v(""),a("p",[s._v("By setting "),a("code",{pre:!0},[s._v("data")]),s._v(" to an array, you can generate the list which can scrolls elegantly in the container.")]),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-wrapper"')]),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(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"items"')]),s._v(">")]),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("li",[a("p",[s._v("Config the options of better-scroll")]),s._v(""),a("p",[s._v("By setting "),a("code",{pre:!0},[s._v("options")]),s._v(", you can config the options of better-scroll, includes scrollbar, pull-down-to-refresh, pull-up-to-load etc. Detailed options are shown in "),a("a",{attrs:{href:"https://ustbhuangyi.github.io/better-scroll/doc/en/options.html"}},[s._v("the Document of better-scroll")]),s._v(". We just introduce several common options here.")]),s._v(""),a("p",[s._v("1 Scroll bar")]),s._v(""),a("p",[s._v("Default is without scroll bar. You can set it to fade-in-fade-out or always-show style.")]),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(""),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"items"')]),s._v(""),a("span",{attrs:{class:"hljs-attr"}},[s._v(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),s._v(">")]),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"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(""),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n"),a("span",{attrs:{class:"hljs-attr"}},[s._v("items")]),s._v(": ["),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v("],\n"),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": {\n"),a("span",{attrs:{class:"hljs-attr"}},[s._v("scrollbar")]),s._v(": {\n"),a("span",{attrs:{class:"hljs-attr"}},[s._v("fade")]),s._v(": "),a("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v("\n }\n }\n }\n }\n}\n")])]),s._v(""),a("p",[s._v("2 Pull down to refresh")]),s._v(""),a("p",[s._v("There is no pull-down-to-refresh function by default. Configuring "),a("code",{pre:!0},[s._v("pullDownRefresh")]),s._v(" option can turn on the dispatching of the event "),a("code",{pre:!0},[s._v("pulling-down")]),s._v(" and the animation of pulling down. You can listen to "),a("code",{pre:!0},[s._v("pulling-down")]),s._v(" event to update data.")]),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(":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(">")]),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"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(""),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n"),a("span",{attrs:{class:"hljs-attr"}},[s._v("items")]),s._v(": ["),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),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("90")]),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("'Refresh success'")]),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("),a("span",{attrs:{class:"hljs-string"}},[s._v("'I am new data: '")]),s._v(" + +"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(""),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),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 }\n}\n")])])]),s._v(""),a("li",[a("p",[s._v("Pulling up to load")]),s._v(""),a("p",[s._v("There is no pull-up-to-load function by default. Configuring "),a("code",{pre:!0},[s._v("pullUpLoad")]),s._v(" option can turn on the dispatching of the event "),a("code",{pre:!0},[s._v("pulling-up")]),s._v(" and the animation of pulling up. You can listen to "),a("code",{pre:!0},[s._v("pulling-up")]),s._v(" event to update data.")]),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(":options")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"options"')]),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(">")]),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"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(""),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n"),a("span",{attrs:{class:"hljs-attr"}},[s._v("items")]),s._v(": ["),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("2")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("4")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v("],\n"),a("span",{attrs:{class:"hljs-attr"}},[s._v("itemIndex")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("5")]),s._v(",\n"),a("span",{attrs:{class:"hljs-attr"}},[s._v("options")]),s._v(": {\n"),a("span",{attrs:{class:"hljs-attr"}},[s._v("pullUpLoad")]),s._v(": {\n"),a("span",{attrs:{class:"hljs-attr"}},[s._v("threshold")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n"),a("span",{attrs:{class:"hljs-attr"}},[s._v("txt")]),s._v(": {\n"),a("span",{attrs:{class:"hljs-attr"}},[s._v("more")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Load more'")]),s._v(",\n"),a("span",{attrs:{class:"hljs-attr"}},[s._v("noMore")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'No more data'")]),s._v("\n }\n }\n }\n }\n },\n"),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\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 = [\n"),a("span",{attrs:{class:"hljs-string"}},[s._v("'I am line '")]),s._v(" + ++"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".itemIndex,\n"),a("span",{attrs:{class:"hljs-string"}},[s._v("'I am line '")]),s._v(" + ++"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".itemIndex,\n"),a("span",{attrs:{class:"hljs-string"}},[s._v("'I am line '")]),s._v(" + ++"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".itemIndex,\n"),a("span",{attrs:{class:"hljs-string"}},[s._v("'I am line '")]),s._v(" + ++"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".itemIndex,\n"),a("span",{attrs:{class:"hljs-string"}},[s._v("'I am line '")]),s._v(" + ++"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".itemIndex\n ]\n\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("li",[a("p",[s._v("Customize the animation of pulling down refreshing and pulling up loading")]),s._v(""),a("p",[s._v("If you don't like the built-in slots of pulling down refreshing and pulling up loading, you can use "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("scoped slots")]),s._v(" to customize animation. The example below uses scoped slots to customize animation of pulling down refreshing, while pulling up loading keeps default built-in animation.")]),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(":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("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("\n"),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("\n"),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 > 40}"')]),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-if")]),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("div")]),s._v(""),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-else")]),s._v(">")]),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("span")]),s._v(">")]),s._v("Refresh success"),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("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("p",[s._v("With the parameters that scoped slots provide, you can control the process of animation according to the change of the state. Detailed scope parameters and their meaning are shown below in 'Slots'.")])])])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("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("options")]),s._v(""),a("td",[s._v("the options of better-scroll")]),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("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("listenScroll")]),s._v(""),a("td",[s._v("whether to dispatch scroll event")]),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")]),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(){vars=this,t=s.$createElement,a=s._self._c||t;returna("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(){vars=this,t=s.$createElement,a=s._self._c||t;returna("ul",[a("li",[a("code",{pre:!0},[s._v("scrollbar")]),s._v(" sub configuration")])])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("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(){vars=this,t=s.$createElement,a=s._self._c||t;returna("ul",[a("li",[a("code",{pre:!0},[s._v("pullDownRefresh")]),s._v(" sub configuration")])])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("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("40")])]),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(){vars=this,t=s.$createElement,a=s._self._c||t;returna("ul",[a("li",[a("code",{pre:!0},[s._v("pullUpLoad")]),s._v(" sub configuration")])])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("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(){vars=this,t=s.$createElement,a=s._self._c||t;returna("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(){vars=this,t=s.$createElement,a=s._self._c||t;returna("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("triggers 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("triggers before scrolling start, if listenBeforeScroll")]),s._v(""),a("td",[s._v("-")])]),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("-")])])])])}]}},nez3:function(s,t,a){varl=a("VU/8")(null,a("aK8u"),null,null,null);s.exports=l.exports}});
