前往新版Gitcode，体验更适合开发者的 AI 搜索 >>
webpackJsonp([65],{"H/J7":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:"ScrollNav"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-ScrollNav-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(" ScrollNav")]),s._v(" "),s._m(0),s._v(" "),a("p",[s._v("ScrollNav component. You can use it to sticky your navigation bar and content.")]),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:"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(" "),a("h4",{attrs:{id:"CubeScrollNav"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-CubeScrollNav-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(" CubeScrollNav")]),s._v(" "),s._m(2),s._v(" "),a("h4",{attrs:{id:"CubeScrollNavPanel"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-CubeScrollNavPanel-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(" CubeScrollNavPanel")]),s._v(" "),s._m(3),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(4),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(5),s._v(" "),a("h3",{attrs:{id:"Instancemethods"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Instancemethods-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(" Instance methods")]),s._v(" "),s._m(6)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("blockquote",[a("p",[s._v("New in 1.10.0+")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("Basic usage - Default")]),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-nav")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"changeHandler"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll-nav-panel")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in data"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.name"')]),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("li")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"food in item.foods"')]),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("img")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"food.icon"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("{{food.name}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),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("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-nav-panel")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll-nav")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" goodsData "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'example/data/goods-list.json'")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" goods = goodsData.goods\n\n"),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("data")]),s._v(": goods\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n changeHandler(label) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'changed to:'")]),s._v(", label)\n }\n }\n}\n")])]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("goods")]),s._v(":")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-string"}},[s._v('"goods"')]),s._v(": [\n {\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"热销榜"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"type"')]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("-1")]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"foods"')]),s._v(": [\n {\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"name"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"皮蛋瘦肉粥"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"icon"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114"')]),s._v(",\n "),a("span",{attrs:{class:"hljs-string"}},[s._v('"image"')]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v('"http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"')]),s._v("\n },\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n ]\n },\n "),a("span",{attrs:{class:"hljs-comment"}},[s._v("// ...")]),s._v("\n]\n")])]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("cube-scroll-nav")]),s._v(" should contains "),a("code",{pre:!0},[s._v("cube-scroll-nav-panel")]),s._v(" which is the navigation target panel content.")]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("cube-scroll-nav-panel")]),s._v(" required Prop: "),a("code",{pre:!0},[s._v("label")]),s._v("(the key of panel).")]),s._v(" "),a("p",[s._v("The "),a("code",{pre:!0},[s._v("change")]),s._v(" event will be triggered when navigation active item changed.")])]),s._v(" "),a("li",[a("p",[s._v("Side 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-nav")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":side")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"true"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":data")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"data"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":current")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"current"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"changeHandler"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@sticky-change")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"stickyChangeHandler"')]),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('"prepend-header"')]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"prepend"')]),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("11"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("22"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("333"),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-nav-panel")]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item in data"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":key")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":label")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.name"')]),s._v("\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":title")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"item.name"')]),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("li")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"food in item.foods"')]),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("img")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v(":src")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"food.icon"')]),s._v(">")]),s._v("\n "),a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),s._v(">")]),s._v("{{food.name}}"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("p")]),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("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-nav-panel")]),s._v(">")]),s._v("\n"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll-nav")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" goodsData "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(" "),a("span",{attrs:{class:"hljs-string"}},[s._v("'example/data/goods-list.json'")]),s._v("\n\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" goods = goodsData.goods\n\n"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("components")]),s._v(": {\n CubePage\n },\n data() {\n "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("data")]),s._v(": goods,\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("current")]),s._v(": goods["),a("span",{attrs:{class:"hljs-number"}},[s._v("3")]),s._v("].name\n }\n },\n "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n changeHandler(label) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'changed to:'")]),s._v(", label)\n },\n stickyChangeHandler(current) {\n "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("console")]),s._v(".log("),a("span",{attrs:{class:"hljs-string"}},[s._v("'sticky-change'")]),s._v(", current)\n }\n }\n}\n")])]),s._v(" "),a("p",[s._v("If set "),a("code",{pre:!0},[s._v("side")]),s._v(" to "),a("code",{pre:!0},[s._v("true")]),s._v(" then the navigation bar will be at the side position.")]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("data")]),s._v(" is the data source, it will be passed to "),a("code",{pre:!0},[s._v("cube-scroll")]),s._v(" component, if the "),a("code",{pre:!0},[s._v("data")]),s._v(" updated then "),a("code",{pre:!0},[s._v("cube-scroll")]),s._v(" will be auto refreshed.")]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("current")]),s._v(" is the default navigation value(label of panel), if set this value then the target panel will be auto scrolled to the top of container.")]),s._v(" "),a("p",[s._v("The "),a("code",{pre:!0},[s._v("sticky-change")]),s._v(" event will be triggered when the navigation bar's sticky state changed. The parameter is one of "),a("code",{pre:!0},[s._v("''")]),s._v(", "),a("code",{pre:!0},[s._v("'cube-scroll-nav-bar'")]),s._v(".")]),s._v(" "),a("p",[s._v("You can use "),a("code",{pre:!0},[s._v("prepend")]),s._v(" slot to insert your own content before the main content.")])])])},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("optional, data source")]),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("side")]),s._v(" "),a("td",[s._v("If set to "),a("code",{pre:!0},[s._v("true")]),s._v(" then the navigation bar will be at the side position")]),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("current")]),s._v(" "),a("td",[s._v("the default navigation value(label of panel)")]),s._v(" "),a("td",[s._v("String/Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("''")])]),s._v(" "),a("tr",[a("td",[s._v("speed")]),s._v(" "),a("td",[s._v("speed of navigating to target panel")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("300")])]),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/en/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"),a("code",{pre:!0},[s._v("Notice")]),s._v(": After "),a("code",{pre:!0},[s._v("1.12.37")]),s._v(", as "),a("a",{attrs:{href:"https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html"}},[s._v("BS")]),s._v(" "),a("code",{pre:!0},[s._v("iOS13.4")]),s._v(" issue "),a("a",{attrs:{href:"https://github.com/ustbhuangyi/better-scroll/issues/978"}},[s._v("#978")]),s._v(", we set "),a("code",{pre:!0},[s._v("useTransition")]),s._v(" to "),a("code",{pre:!0},[s._v("fasle")]),s._v(" by default")])])])])},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("label")]),s._v(" "),a("td",[s._v("required, the key of panel")]),s._v(" "),a("td",[s._v("String/Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("title")]),s._v(" "),a("td",[s._v("the title of panel, can be a HTML string value")]),s._v(" "),a("td",[s._v("String/Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("default equal to "),a("code",{pre:!0},[s._v("label")]),s._v(" Prop")])])])])},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("default panel content")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("prepend")]),s._v(" "),a("td",[s._v("prepend content")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("bar")]),s._v(" "),a("td",[s._v("navigation bar content, you should use "),a("code",{pre:!0},[s._v("cube-scroll-nav-bar")]),s._v(" component to define your own navigation bar content")]),s._v(" "),a("td",[s._v("labels: the collection of all panel labels"),a("br"),s._v("txts: the collection of all panel titles"),a("br"),s._v("current: current active navigation value(label of panel)")])])])])},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("change")]),s._v(" "),a("td",[s._v("triggers when navigation active item changed")]),s._v(" "),a("td",[s._v("active - active navigation value(label of panel)")])]),s._v(" "),a("tr",[a("td",[s._v("sticky-change")]),s._v(" "),a("td",[s._v("triggers when the navigation bar's sticky state changed")]),s._v(" "),a("td",[s._v("current - if navigation bar is fixed then this value will be 'cube-scroll-nav-bar', otherwise this value will be ''")])])])])},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("tbody",[a("tr",[a("td",[s._v("refresh")]),s._v(" "),a("td",[s._v("You can call this method when content updated")])])])])}]}},Y4Sq:function(s,t,a){var e=a("VU/8")(null,a("H/J7"),null,null,null);s.exports=e.exports},"jS6/":function(s,t,a){s.exports=a("Y4Sq")}});
