前往新版Gitcode，体验更适合开发者的 AI 搜索 >>
webpackJsonp([14],{"3wyd":function(s,a){s.exports={render:function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("section",[t("h2",{attrs:{id:"Sticky组件"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-Sticky组件-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(" Sticky 组件")]),s._v(" "),s._m(0),s._v(" "),t("p",[s._v("吸附组件，当滚动位置到达目标元素位置后，目标元素就会自动吸附。")]),s._v(" "),t("h3",{attrs:{id:"示例"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-示例-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(1),s._v(" "),t("h3",{attrs:{id:"Props"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-Props-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(" "),t("h4",{attrs:{id:"CubeSticky"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-CubeSticky-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(" CubeSticky")]),s._v(" "),s._m(2),s._v(" "),t("h4",{attrs:{id:"CubeStickyEle"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-CubeStickyEle-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(" CubeStickyEle")]),s._v(" "),s._m(3),s._v(" "),s._m(4),s._v(" "),t("h3",{attrs:{id:"插槽"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-插槽-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(5),s._v(" "),t("h3",{attrs:{id:"事件"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-事件-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(6),s._v(" "),t("h3",{attrs:{id:"实例方法"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-实例方法-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("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(7)])},staticRenderFns:[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("blockquote",[t("p",[s._v("1.10.0 新增")])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("ul",[t("li",[t("p",[s._v("综合使用 - Scroll")]),s._v(" "),t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-sticky")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":pos")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"scrollY"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":scroll-events")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"scrollEvents"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@scroll")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"scrollHandler"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("title"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-sticky-ele")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ele-key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"11"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"sticky-header"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("111"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-sticky-ele")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in items"')]),s._v(">")]),s._v("{{item}}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-sticky-ele")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ele-key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"22"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"sticky-header"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("222"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("222"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-sticky-ele")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in items2"')]),s._v(">")]),s._v("{{item}}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-sticky-ele")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ele-key")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"33"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"sticky-header"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("333"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-sticky-ele")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in items3"')]),s._v(">")]),s._v("{{item}}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"fixed"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot-scope")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"props"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"sticky-header"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("{{props.current}}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-sticky")]),s._v(">")]),s._v("\n")])]),s._v(" "),t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" _data = [\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'😀 😁 😂 🤣 😃 😄 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🙂 🤗 🤩 🤔 🤨 😐 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'👆🏻 scroll up/down 👇🏻 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'😔 😕 🙃 🤑 😲 ☹️ '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🐣 🐣 🐣 🐣 🐣 🐣 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'👆🏻 scroll up/down 👇🏻 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🐥 🐥 🐥 🐥 🐥 🐥 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🤓 🤓 🤓 🤓 🤓 🤓 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'👆🏻 scroll up/down 👇🏻 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🦔 🦔 🦔 🦔 🦔 🦔 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🙈 🙈 🙈 🙈 🙈 🙈 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'👆🏻 scroll up/down 👇🏻 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🚖 🚖 🚖 🚖 🚖 🚖 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 '")]),s._v("\n]\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("scrollEvents")]),s._v(": ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'scroll'")]),s._v("],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("scrollY")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("items")]),s._v(": _data.concat(),\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("items2")]),s._v(": _data.concat(),\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("items3")]),s._v(": _data.concat()\n }\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n scrollHandler({ y }) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".scrollY = -y\n }\n }\n}\n")])]),s._v(" "),t("p",[t("code",{pre:!0},[s._v("cube-sticky")]),s._v(" 需要和 "),t("code",{pre:!0},[s._v("cube-sticky-ele")]),s._v(" 组件配合使用。")]),s._v(" "),t("p",[t("code",{pre:!0},[s._v("cube-sticky")]),s._v(" 组件依赖 "),t("code",{pre:!0},[s._v("pos")]),s._v(" Prop 来指定当前实时位置，由于 Scroll 组件中派发的 "),t("code",{pre:!0},[s._v("y")]),s._v(" 为负值，所以我们需要将其转换为滚动位置，直接取 "),t("code",{pre:!0},[s._v("-y")]),s._v(" 即可。")]),s._v(" "),t("p",[t("code",{pre:!0},[s._v("cube-sticky-ele")]),s._v(" 组件的 "),t("code",{pre:!0},[s._v("ele-key")]),s._v(" Prop 是可选的，用于指定当前吸附元素的 key 值，默认为当前组件的索引值，即在 "),t("code",{pre:!0},[s._v("cube-sticky")]),s._v(" 组件中的第几个 "),t("code",{pre:!0},[s._v("cube-sticky-ele")]),s._v("。")]),s._v(" "),t("p",[s._v("我们还可以利用 "),t("code",{pre:!0},[s._v("cube-sticky")]),s._v(" 组件的 "),t("code",{pre:!0},[s._v("fixed")]),s._v(" 插槽实现自定义吸附效果，如果没有插槽的话，内部默认会将吸附的 "),t("code",{pre:!0},[s._v("cube-sticky-ele")]),s._v(" 的内容显示出来。")])]),s._v(" "),t("li",[t("p",[s._v("综合使用 - Native Scroll")]),s._v(" "),t("p",[s._v("利用原生滚动实现效果。")]),s._v(" "),t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-sticky")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":pos")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"scrollY"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":check-top")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"checkTop"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"scroll-ele"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@scroll")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"scrollHandler"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("title"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-sticky-ele")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"sticky-header"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("111"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-sticky-ele")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in items"')]),s._v(">")]),s._v("{{item}}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-sticky-ele")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"sticky-header"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("222"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("222"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-sticky-ele")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in items2"')]),s._v(">")]),s._v("{{item}}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-sticky-ele")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"sticky-header"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("333"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-sticky-ele")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in items3"')]),s._v(">")]),s._v("{{item}}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-sticky")]),s._v(">")]),s._v("\n")])]),s._v(" "),t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" _data = [\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'😀 😁 😂 🤣 😃 😄 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🙂 🤗 🤩 🤔 🤨 😐 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'👆🏻 scroll up/down 👇🏻 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'😔 😕 🙃 🤑 😲 ☹️ '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🐣 🐣 🐣 🐣 🐣 🐣 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'👆🏻 scroll up/down 👇🏻 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🐥 🐥 🐥 🐥 🐥 🐥 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🤓 🤓 🤓 🤓 🤓 🤓 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'👆🏻 scroll up/down 👇🏻 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🦔 🦔 🦔 🦔 🦔 🦔 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🙈 🙈 🙈 🙈 🙈 🙈 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'👆🏻 scroll up/down 👇🏻 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🚖 🚖 🚖 🚖 🚖 🚖 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 '")]),s._v("\n]\n\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("scrollY")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checkTop")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("false")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("items")]),s._v(": _data.concat(),\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("items2")]),s._v(": _data.concat(),\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("items3")]),s._v(": _data.concat()\n }\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n scrollHandler(e) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".scrollY = e.currentTarget.scrollTop\n }\n }\n}\n")])]),s._v(" "),t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-stylus"}},[t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".scroll-ele")]),s._v("\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("height")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("100%")]),s._v("\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("overflow")]),s._v(": auto\n -webkit-"),t("span",{attrs:{class:"hljs-attribute"}},[s._v("overflow")]),s._v("-scrolling: touch\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("background-color")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("#fff")]),s._v("\n")])]),s._v(" "),t("p",[s._v("这个示例展示的就是利用原生滚动实现吸附效果的。")]),s._v(" "),t("p",[t("code",{pre:!0},[s._v("check-top")]),s._v(" Prop 则是用来控制检查条件的，默认为 "),t("code",{pre:!0},[s._v("true")]),s._v("，意味着当 "),t("code",{pre:!0},[s._v("cube-sticky-ele")]),s._v(" 元素的顶部达到 "),t("code",{pre:!0},[s._v("cube-sticky")]),s._v(" 的顶部的时候就会被吸附；这个例子中我们设置为了 "),t("code",{pre:!0},[s._v("false")]),s._v("，意味着当 "),t("code",{pre:!0},[s._v("cube-sticky-ele")]),s._v(" 的底部达到 "),t("code",{pre:!0},[s._v("cube-sticky")]),s._v(" 的顶部的时候会被吸附。")])]),s._v(" "),t("li",[t("p",[s._v("模拟微信效果 - WeChat")]),s._v(" "),t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-sticky")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":pos")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"scrollY"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":check-top")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"checkTop"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("fixed-show-ani")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"sticky-fixed-show"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@diff-change")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"diffChange"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v(":scroll-events")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"scrollEvents"')]),s._v("\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("@scroll")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"scrollHandler"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("img")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("src")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"https://ss3.bdstatic.com/iPoZeXSm1A5BphGlnYG/skin/6.jpg"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-sticky-ele")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"sticky-header"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("111"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-sticky-ele")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in items"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"border-top-1px"')]),s._v(">")]),s._v("{{item}}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in items2"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"border-top-1px"')]),s._v(">")]),s._v("{{item}}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("v-for")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"item in items3"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"border-top-1px"')]),s._v(">")]),s._v("{{item}}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-scroll")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("class")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"sticky-header"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("slot")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"fixed"')]),s._v(" "),t("span",{attrs:{class:"hljs-attr"}},[s._v("ref")]),s._v("="),t("span",{attrs:{class:"hljs-string"}},[s._v('"stickyHeader"')]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("header"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("li")]),s._v(">")]),s._v("\n "),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("ul")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("cube-sticky")]),s._v(">")]),s._v("\n")])]),s._v(" "),t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" _data = [\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'😀 😁 😂 🤣 😃 😄 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🙂 🤗 🤩 🤔 🤨 😐 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'👆🏻 scroll up/down 👇🏻 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'😔 😕 🙃 🤑 😲 ☹️ '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🐣 🐣 🐣 🐣 🐣 🐣 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'👆🏻 scroll up/down 👇🏻 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🐥 🐥 🐥 🐥 🐥 🐥 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🤓 🤓 🤓 🤓 🤓 🤓 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'👆🏻 scroll up/down 👇🏻 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🦔 🦔 🦔 🦔 🦔 🦔 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🙈 🙈 🙈 🙈 🙈 🙈 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'👆🏻 scroll up/down 👇🏻 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'🚖 🚖 🚖 🚖 🚖 🚖 '")]),s._v(",\n "),t("span",{attrs:{class:"hljs-string"}},[s._v("'✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 ✌🏻 '")]),s._v("\n]\n\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("return")]),s._v(" {\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("scrollEvents")]),s._v(": ["),t("span",{attrs:{class:"hljs-string"}},[s._v("'scroll'")]),s._v("],\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("scrollY")]),s._v(": "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("checkTop")]),s._v(": "),t("span",{attrs:{class:"hljs-literal"}},[s._v("true")]),s._v(",\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("items")]),s._v(": _data.concat(),\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("items2")]),s._v(": _data.concat(),\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("items3")]),s._v(": _data.concat()\n }\n },\n "),t("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n scrollHandler({ y }) {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".scrollY = -y\n },\n diffChange() {\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("let")]),s._v(" opacity = "),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (height) {\n opacity = diff / height\n }\n "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$refs.stickyHeader.style.opacity = opacity\n }\n }\n}\n")])]),s._v(" "),t("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-stylus"}},[t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".sticky-fixed-show-enter")]),s._v(", "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".sticky-fixed-show-leave-active")]),s._v("\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("transform")]),s._v(": translate("),t("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(", -"),t("span",{attrs:{class:"hljs-number"}},[s._v("100%")]),s._v(")\n"),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".sticky-fixed-show-enter-active")]),s._v(", "),t("span",{attrs:{class:"hljs-selector-class"}},[s._v(".sticky-fixed-show-leave-active")]),s._v("\n "),t("span",{attrs:{class:"hljs-attribute"}},[s._v("transition")]),s._v(": all ."),t("span",{attrs:{class:"hljs-number"}},[s._v("5s")]),s._v(" ease-in-out\n")])]),s._v(" "),t("p",[s._v("可以通过 "),t("code",{pre:!0},[s._v("fixed-show-ani")]),s._v(" 指定当元素吸附时出现的 "),t("code",{pre:!0},[s._v("transition")]),s._v(" 名字，我们这里指定 "),t("code",{pre:!0},[s._v("sticky-fixed-show")]),s._v("，所以相对应的我们在样式中加了对应的动画控制效果。")]),s._v(" "),t("p",[s._v("同时可以通过 "),t("code",{pre:!0},[s._v("diff-change")]),s._v(" 事件得到当前 sticky 元素滚动的差值，一般我们可以和当前 sticky 元素的高做除法得到相对百分比，可以精细控制出现的具体细节。")])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",[t("thead",[t("tr",[t("th",[s._v("参数")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("可选值")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("pos")]),s._v(" "),t("td",[s._v("必须，滚动位置")]),s._v(" "),t("td",[s._v("Number")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("checkTop")]),s._v(" "),t("td",[s._v("是否检测顶部位置，如果为 false，则检查 sticky-ele 元素的底部边界")]),s._v(" "),t("td",[s._v("Boolean")]),s._v(" "),t("td",[s._v("true/false")]),s._v(" "),t("td",[s._v("true")])]),s._v(" "),t("tr",[t("td",[s._v("fixedShowAni")]),s._v(" "),t("td",[s._v("元素吸附时指定 transition 的 name 值")]),s._v(" "),t("td",[s._v("String")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td",[s._v("如果 checkTop 为 true，则为 ''，如果为 false，则为 'cube-sticky-fixed-fade'")])]),s._v(" "),t("tr",[t("td",[s._v("offset")]),s._v(" "),t("td",[s._v("偏移值，传入的 pos 的值会加上这个值修正")]),s._v(" "),t("td",[s._v("Number")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td",[s._v("0")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",[t("thead",[t("tr",[t("th",[s._v("参数")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("可选值")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("eleKey")]),s._v(" "),t("td",[s._v("吸顶元素的 key 值")]),s._v(" "),t("td",[s._v("Number/String")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td",[s._v("-")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("p",[s._v("当 "),t("code",{pre:!0},[s._v("eleKey")]),s._v(" 不存在时，CubeSticky 组件会获取当前 CubeStickyEle 组件的次序索引作为吸附元素的标示。")])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",[t("thead",[t("tr",[t("th",[s._v("名字")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("作用域参数")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("default")]),s._v(" "),t("td",[s._v("默认内容")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("fixed")]),s._v(" "),t("td",[s._v("元素吸附时内容如何展示")]),s._v(" "),t("td",[s._v("current: 当前吸附元素的 key 值"),t("br"),s._v("index: 吸附元素索引值（非响应式的）")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",[t("thead",[t("tr",[t("th",[s._v("事件名")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("参数1")]),s._v(" "),t("th",[s._v("参数2")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("change")]),s._v(" "),t("td",[s._v("吸附的元素发生改变时触发")]),s._v(" "),t("td",[s._v("current - 吸附的元素的 key 值，如果没有的话，则为 ''")]),s._v(" "),t("td",[s._v("index - 吸附元素的索引值，没有的话，则为 -1（非响应式的）")])]),s._v(" "),t("tr",[t("td",[s._v("diff-change")]),s._v(" "),t("td",[s._v("sticky 元素滚动的差值改变时触发")]),s._v(" "),t("td",[s._v("diff - 差值，最小 0")]),s._v(" "),t("td",[s._v("height: 当前 sticky 元素的高度")])])])])},function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("table",[t("thead",[t("tr",[t("th",[s._v("方法名")]),s._v(" "),t("th",[s._v("说明")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("refresh")]),s._v(" "),t("td",[s._v("刷新，当内容发生变化时可用于重新计算高度和位置")])])])])}]}},dgnj:function(s,a,t){var l=t("VU/8")(null,t("3wyd"),null,null,null);s.exports=l.exports},"ula/":function(s,a,t){s.exports=t("dgnj")}});
