webpackJsonp([17],{"/Z59":function(s,t,a){var v=a("VU/8")(null,a("3Wrv"),null,null,null);s.exports=v.exports},"3Wrv":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(" "),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(4),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(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(" "),s._m(11),s._v(" "),s._m(12),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(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)])},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）纵向滚动：内容元素的高度必须大于容器元素。由于容器元素的高度默认会被子元素的高度撑开，所以为了满足我们的滚动前提，你需要给 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）横向滚动：内容元素的宽度必须大于容器元素。由于在默认情况下，子元素的宽度不会超过容器元素，所以需要给 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("ul",[a("li",[a("p",[s._v("基本使用")]),s._v(" "),a("p",[s._v("通过设置 "),a("code",{pre:!0},[s._v("data")]),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(" "),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")])]),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-wrapper")]),s._v("\n  "),a("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("100px")]),s._v("\n")])])]),s._v(" "),a("li",[a("p",[s._v("配置 better-scroll 选项")]),s._v(" "),a("p",[s._v("通过 options 属性可以配置 better-scroll 的选项，包括滚动条、下拉刷新、上拉加载等，具体可查看 better-scroll 的"),a("a",{attrs:{href:"https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html"}},[s._v("官方文档")]),s._v("，这里仅对几个常用的配置项进行介绍说明。")]),s._v(" "),a("p",[s._v("1）滚动条")]),s._v(" "),a("p",[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(" "),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）下拉刷新")]),s._v(" "),a("p",[s._v("默认无下拉刷新功能，可通过配置项"),a("code",{pre:!0},[s._v("pullDownRefresh")]),s._v("开启"),a("code",{pre:!0},[s._v("pulling-down")]),s._v("事件派发和下拉动画，你可以监听"),a("code",{pre:!0},[s._v("pulling-down")]),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(":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("// Mock async load.")]),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 have new data, just update the data property.")]),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("// If no new data, you need use the method forceUpdate to tell us the load is done.")]),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("p",[s._v("需要注意的是，如果请求结果是没有新数据，也就是数据与之前一模一样没有变化，则必须使用 "),a("code",{pre:!0},[s._v("this.$refs.scroll.forceUpdate()")]),s._v(" 结束此次下拉刷新，这样，Scroll 组件才会开始监听下一次下拉刷新操作。")]),s._v(" "),a("p",[s._v("3）上拉加载")]),s._v(" "),a("p",[s._v("默认无上拉加载功能，可通过配置项"),a("code",{pre:!0},[s._v("pullUpLoad")]),s._v("开启"),a("code",{pre:!0},[s._v("pulling-up")]),s._v("事件派发和上拉动画，你可以监听"),a("code",{pre:!0},[s._v("pulling-up")]),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(":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("// Mock async load.")]),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 have new data, just update the data property.")]),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("// If no new data, you need use the method forceUpdate to tell us the load is done.")]),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("p",[s._v("需要注意的是，如果请求结果是没有新数据，也就是数据与之前一模一样没有变化，则必须使用 "),a("code",{pre:!0},[s._v("this.$refs.scroll.forceUpdate()")]),s._v(" 结束此次上拉加载，这样，Scroll 组件才会开始监听下一次上拉加载操作。")])]),s._v(" "),a("li",[a("p",[s._v("自定义下拉刷新和上拉加载动画")]),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("做自定义动画。下面这个示例，就是用作用域插槽对下拉刷新做了自定义动画，而上拉加载则保留了缺省的内置动画。")]),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("通过作用域插槽提供的作用域参数，你可以根据各个状态的变化来控制动画流程。具体的作用域参数及其含义详见下面的插槽。")])])])},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")])])])])},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("-")])])])])}]}},kegs:function(s,t,a){s.exports=a("/Z59")}});