首頁 探索 說明
註冊 登入
wicresoft
/
doc_project
2
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
分支: main
分支列表 標籤列表
doc_project
/
better-scroll-docs
/
assets
/
js
/
103.7a3ae3b5.js

103.7a3ae3b5.js 71 KB
永久連結 文件歷史 原始文件

1 
  1. (window.webpackJsonp=window.webpackJsonp||[]).push([[103],{813:function(t,s,a){"use strict";a.r(s);var n=a(41),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"配置项"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#配置项"}},[t._v("#")]),t._v(" 配置项")]),t._v(" "),s("p",[t._v("BetterScroll 支持很多参数配置，可以在初始化的时候传入第二个参数，比如：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" BScroll "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@better-scroll/core'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" scroll "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BScroll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("scrollY")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("click")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("这样就实现了一个具有纵向可点击的滚动效果的列表。BetterScroll 支持的参数非常多，接下来我们来列举 BetterScroll 支持的参数。")]),t._v(" "),s("h2",{attrs:{id:"startx"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#startx"}},[t._v("#")]),t._v(" startX")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("0")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：横轴方向初始化位置。")])]),t._v(" "),s("h2",{attrs:{id:"starty"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#starty"}},[t._v("#")]),t._v(" startY")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("0")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：纵轴方向初始化位置。")])]),t._v(" "),s("h2",{attrs:{id:"scrollx"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#scrollx"}},[t._v("#")]),t._v(" scrollX")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("： "),s("code",[t._v("false")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：当设置为 true 的时候，可以开启横向滚动。")]),t._v(" "),s("li",[s("strong",[t._v("备注")]),t._v("：当设置 "),s("RouterLink",{attrs:{to:"/zh-CN/guide/base-scroll-options.html#eventpassthrough"}},[t._v("eventPassthrough")]),t._v(" 为 'horizontal' 的时候，该配置无效。")],1)]),t._v(" "),s("h2",{attrs:{id:"scrolly"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#scrolly"}},[t._v("#")]),t._v(" scrollY")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("true")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：当设置为 true 的时候，可以开启纵向滚动。")]),t._v(" "),s("li",[s("strong",[t._v("备注")]),t._v("：当设置 "),s("RouterLink",{attrs:{to:"/zh-CN/guide/base-scroll-options.html#eventpassthrough"}},[t._v("eventPassthrough")]),t._v(" 为 'vertical' 的时候，该配置无效。")],1)]),t._v(" "),s("h2",{attrs:{id:"freescroll"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#freescroll"}},[t._v("#")]),t._v(" freeScroll")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("false")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：在默认情况下，由于人的手指无法做到绝对垂直或者水平的运动，因此在一次手指操作的过程中，都会存在横向以及纵向的偏移量，内部默认会摒弃偏移量较小的一个方向，保留另一个方向的滚动。但是在某些场景我们需要同时计算横向以及纵向的手指偏移距离，而不是只计算偏移量较大的一个方向，这个时候我们只要设置 "),s("code",[t._v("freeScroll")]),t._v(" 为 true 即可。")]),t._v(" "),s("li",[s("strong",[t._v("备注")]),t._v("：当设置 "),s("RouterLink",{attrs:{to:"/zh-CN/guide/base-scroll-options.html#eventpassthrough"}},[t._v("eventPassthrough")]),t._v(" 不为空的时候，该配置无效。")],1),t._v(" "),s("li",[s("strong",[t._v("示例")]),t._v("：")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 手指起点的坐标 e1: { pageX: 120, pageY: 120 }")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 手指终点的坐标 e2: { pageX: 121, pageY: 140 }")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// offsetX:  e2.pageX - e1.pageX = 1")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// offsetY:  e2.pageY - e1.pageY = 20")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 如果 freeScroll 为 false， 由于 offsetY > offsetX + directionLockThreshold")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// offsetX 被重置为 0， 只保留 offsetY 的偏移量，因此只做一次纵向滚动")]),t._v("\n")])])]),s("h2",{attrs:{id:"directionlockthreshold"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#directionlockthreshold"}},[t._v("#")]),t._v(" directionLockThreshold")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("5")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：当 "),s("code",[t._v("freeScroll")]),t._v(" 为 false 的情况，我们需要锁定只滚动一个方向的时候，我们在"),s("strong",[t._v("初始滚动")]),t._v("的时候根据横轴和纵轴滚动的绝对值做差，当差值大于 "),s("code",[t._v("directionLockThreshold")]),t._v(" 的时候来决定滚动锁定的方向。")]),t._v(" "),s("li",[s("strong",[t._v("备注")]),t._v("：当设置 "),s("RouterLink",{attrs:{to:"/zh-CN/guide/base-scroll-options.html#eventpassthrough"}},[t._v("eventPassthrough")]),t._v(" 的时候，"),s("code",[t._v("directionLockThreshold")]),t._v(" 设置无效，始终为 0。")],1)]),t._v(" "),s("h2",{attrs:{id:"eventpassthrough"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#eventpassthrough"}},[t._v("#")]),t._v(" eventPassthrough")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("： "),s("code",[t._v("string")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("''")])]),t._v(" "),s("li",[s("strong",[t._v("可选值")]),t._v("："),s("code",[t._v("'vertical' | 'horizontal'")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：有时候我们使用 BetterScroll 在某个方向模拟滚动的时候，希望在另一个方向保留原生的滚动（比如轮播图，我们希望横向模拟横向滚动，而纵向的滚动还是保留原生滚动，我们可以设置 "),s("code",[t._v("eventPassthrough")]),t._v(" 为 vertical；相应的，如果我们希望保留横向的原生滚动，可以设置"),s("code",[t._v("eventPassthrough")]),t._v("为 horizontal）。")]),t._v(" "),s("li",[s("strong",[t._v("备注")]),t._v("："),s("code",[t._v("eventPassthrough")]),t._v(" 的设置会导致其它一些选项配置无效，需要小心使用它。")])]),t._v(" "),s("h2",{attrs:{id:"click"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#click"}},[t._v("#")]),t._v(" click")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("false")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：BetterScroll 默认会阻止浏览器的原生 click 事件。当设置为 true，BetterScroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 "),s("code",[t._v("_constructed")]),t._v("，值为 true。")])]),t._v(" "),s("h2",{attrs:{id:"dblclick"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#dblclick"}},[t._v("#")]),t._v(" dblclick")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("boolean | Object")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("false")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：派发双击点击事件。当配置成 true 的时候，默认 2 次点击的延时为 300 ms，如果配置成对象可以修改 "),s("code",[t._v("delay")]),t._v("。")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("dblclick")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("delay")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("300")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"tap"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tap"}},[t._v("#")]),t._v(" tap")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("string")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("''")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：因为 BetterScroll 会阻止原生的 click 事件，我们可以设置 tap 为 'tap'，它会在区域被点击的时候派发一个 tap 事件，你可以像监听原生事件那样去监听它。")])]),t._v(" "),s("h2",{attrs:{id:"bounce"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#bounce"}},[t._v("#")]),t._v(" bounce")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("boolean | Object")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("true")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：当滚动超过边缘的时候会有一小段回弹动画。设置为 true 则开启动画。")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("bounce")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("top")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("bottom")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("left")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("right")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[s("code",[t._v("bounce")]),t._v(" 可以支持关闭某些边的回弹效果，可以设置对应边的 "),s("code",[t._v("key")]),t._v(" 为 "),s("code",[t._v("false")]),t._v(" 即可。")]),t._v(" "),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),s("p",[t._v("如果想要便捷的设置所有边为 true 或者 false，只需要设置 "),s("code",[t._v("bounce")]),t._v(" 为 true 或 false 即可。")])]),t._v(" "),s("h2",{attrs:{id:"bouncetime"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#bouncetime"}},[t._v("#")]),t._v(" bounceTime")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("800")]),t._v("（单位ms）")]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：设置回弹动画的动画时长。")])]),t._v(" "),s("h2",{attrs:{id:"momentum"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#momentum"}},[t._v("#")]),t._v(" momentum")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("true")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：当快速在屏幕上滑动一段距离的时候，会根据滑动的距离和时间计算出动量，并生成滚动动画。设置为 true 则开启动画。")])]),t._v(" "),s("h2",{attrs:{id:"momentumlimittime"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#momentumlimittime"}},[t._v("#")]),t._v(" momentumLimitTime")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("300")]),t._v("（单位ms）")]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：只有在屏幕上快速滑动的时间小于 "),s("code",[t._v("momentumLimitTime")]),t._v("，才能开启 momentum 动画。")])]),t._v(" "),s("h2",{attrs:{id:"momentumlimitdistance"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#momentumlimitdistance"}},[t._v("#")]),t._v(" momentumLimitDistance")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("15")]),t._v("（单位px）")]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：只有在屏幕上快速滑动的距离大于 "),s("code",[t._v("momentumLimitDistance")]),t._v("，才能开启 momentum 动画。")])]),t._v(" "),s("h2",{attrs:{id:"swipetime"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#swipetime"}},[t._v("#")]),t._v(" swipeTime")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("2500")]),t._v("（单位ms）")]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：设置 momentum 动画的动画时长。")])]),t._v(" "),s("h2",{attrs:{id:"swipebouncetime"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#swipebouncetime"}},[t._v("#")]),t._v(" swipeBounceTime")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("500")]),t._v("（单位ms）")]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：设置当运行 momentum 动画时，超过边缘后的回弹整个动画时间。")])]),t._v(" "),s("h2",{attrs:{id:"deceleration"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#deceleration"}},[t._v("#")]),t._v(" deceleration")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("0.0015")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：表示 momentum 动画的减速度。")])]),t._v(" "),s("h2",{attrs:{id:"flicklimittime"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#flicklimittime"}},[t._v("#")]),t._v(" flickLimitTime")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("200")]),t._v("（单位ms）")]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：有的时候我们要捕获用户的轻拂动作（短时间滑动一个较短的距离）。只有用户在屏幕上滑动的时间小于 "),s("code",[t._v("flickLimitTime")]),t._v(" ，才算一次轻拂。")])]),t._v(" "),s("h2",{attrs:{id:"flicklimitdistance"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#flicklimitdistance"}},[t._v("#")]),t._v(" flickLimitDistance")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("100")]),t._v("（单位px）")]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：只有用户在屏幕上滑动的距离小于 "),s("code",[t._v("flickLimitDistance")]),t._v(" ，才算一次轻拂。")])]),t._v(" "),s("h2",{attrs:{id:"resizepolling"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#resizepolling"}},[t._v("#")]),t._v(" resizePolling")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("60")]),t._v("（单位ms)")]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：当窗口的尺寸改变的时候，需要对 BetterScroll 做重新计算，为了优化性能，我们对重新计算做了延时。60ms 是一个比较合理的值。")])]),t._v(" "),s("h2",{attrs:{id:"probetype"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#probetype"}},[t._v("#")]),t._v(" probeType")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("0")])]),t._v(" "),s("li",[s("strong",[t._v("可选值")]),t._v("："),s("code",[t._v("1|2|3")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：决定是否派发 scroll 事件，对页面的性能有影响，尤其是在 "),s("code",[t._v("useTransition")]),t._v(" 为 true 的模式下。")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 派发 scroll 的场景分为两种：")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1. 手指作用在滚动区域（content DOM）上;")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2. 调用 scrollTo 方法或者触发 momentum 滚动动画（其实底层还是调用 scrollTo 方法）")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 对于 v2.1.0 版本，对 probeType 做了一次统一")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1. probeType 为 0，在任何时候都不派发 scroll 事件，")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 2. probeType 为 1，仅仅当手指按在滚动区域上，每隔 momentumLimitTime 毫秒派发一次 scroll 事件，")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 3. probeType 为 2，仅仅当手指按在滚动区域上，一直派发 scroll 事件，")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 4. probeType 为 3，任何时候都派发 scroll 事件，包括调用 scrollTo 或者触发 momentum 滚动动画")]),t._v("\n")])])]),s("h2",{attrs:{id:"preventdefault"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#preventdefault"}},[t._v("#")]),t._v(" preventDefault")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("true")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：当事件派发后是否阻止浏览器默认行为。这个值应该设为 true，除非你真的知道你在做什么，通常你可能用到的是 "),s("code",[t._v("preventDefaultException")]),t._v("。")])]),t._v(" "),s("h2",{attrs:{id:"preventdefaultexception"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#preventdefaultexception"}},[t._v("#")]),t._v(" preventDefaultException")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("Object")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("{ tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|AUDIO)$/}")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：BetterScroll 会阻止原生的滚动，这样也同时阻止了一些原生组件的默认行为。这个时候我们不能对这些元素做 preventDefault，所以我们可以配置 preventDefaultException。默认值 "),s("code",[t._v("{tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|AUDIO)$/}")]),t._v("表示标签名为 input、textarea、button、select、audio 这些元素的默认行为都不会被阻止。")]),t._v(" "),s("li",[s("strong",[t._v("备注")]),t._v("：这是一个非常有用的配置，它的 key 是 DOM 元素的属性值，value 可以是一个正则表达式。比如我们想配一个 class 名称为 test 的元素，那么配置规则为 "),s("code",[t._v("{className:/(^|\\s)test(\\s|$)/}")]),t._v("。")])]),t._v(" "),s("h2",{attrs:{id:"tagexception"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tagexception"}},[t._v("#")]),t._v(" tagException")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("Object")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("{ tagName: /^TEXTAREA$/ }")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：如果 BetterScroll 嵌套了 textarea 等表单元素，往往用户的预期应该是滑动 textarea 不应该引起 bs 滚动，也就是如果操纵的 DOM（eg：textarea 标签） 命中了配置的规则，bs 不会滚动。")]),t._v(" "),s("li",[s("strong",[t._v("备注")]),t._v("：这是一个非常有用的配置，它的 key 是 DOM 元素的属性值，value 可以是一个正则表达式。比如我们想配一个 classname 含有 test 类名的元素，那么配置规则为 "),s("code",[t._v("{className:/(^|\\s)test(\\s|$)/}")]),t._v("。")])]),t._v(" "),s("h2",{attrs:{id:"hwcompositing"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#hwcompositing"}},[t._v("#")]),t._v(" HWCompositing")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("true")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：是否开启硬件加速，开启它会在 content 元素上添加 "),s("code",[t._v("translateZ(1px)")]),t._v(" 来开启硬件加速从而提升动画性能，有很好的滚动效果。")]),t._v(" "),s("li",[s("strong",[t._v("备注")]),t._v("：只有支持硬件加速的浏览器开启才有效果。")])]),t._v(" "),s("h2",{attrs:{id:"usetransition"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#usetransition"}},[t._v("#")]),t._v(" useTransition")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("true")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：是否使用 CSS3 transition 动画。如果设置为 false，则使用 requestAnimationFrame 做动画。")])]),t._v(" "),s("h2",{attrs:{id:"bindtowrapper"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#bindtowrapper"}},[t._v("#")]),t._v(" bindToWrapper")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("false")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：touchmove 事件通常会绑定到 document 上而不是滚动的容器（wrapper）上，当移动的过程中光标（通常对于 PC 场景）离开滚动的容器滚动仍然会继续，这通常是期望的。当然你也可以把 move 事件绑定到滚动的容器上，"),s("code",[t._v("bindToWrapper")]),t._v(" 设置为 true 即可，这样一旦移动的过程中光标离开滚动的容器，滚动会立刻停止。")]),t._v(" "),s("li",[s("strong",[t._v("注意")]),t._v("：对于移动端来说，就算 touchmove 事件绑定在 wrapper 上，手指离开 wrapper，依然能移动 wrapper。")])]),t._v(" "),s("h2",{attrs:{id:"disablemouse"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#disablemouse"}},[t._v("#")]),t._v(" disableMouse")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("：根据当前浏览器环境计算而来")]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：当在移动端环境（支持 touch 事件），disableMouse 会计算为 true，这样就不会监听鼠标相关的事件，而在 PC 环境，disableMouse 会计算为 false，就会监听鼠标相关事件。")])]),t._v(" "),s("h2",{attrs:{id:"disabletouch"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#disabletouch"}},[t._v("#")]),t._v(" disableTouch")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("：根据当前浏览器环境计算而来")]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：当在移动端环境（支持 touch 事件），disableTouch 会计算为 false，监听 touch 相关的事件，而在 PC 环境，disableTouch 会计算为 true，不会监听 touch 相关事件。")])]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),s("p",[t._v("考虑到用户的一些特定场景，比如在"),s("strong",[t._v("平板电脑需要支持 touch 事件，平板电脑接入鼠标又得支持 mouse 事件")]),t._v("，那么实例化 BetterScroll 需要如下配置：")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bs "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BScroll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("disableMouse")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("disableTouch")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("由于不同设备、不同浏览器环境的底层实现逻辑不同，BetterScroll 内部计算是否监听 touch 还是 mouse 事件可能会有判断失误，因此你可以根据以上的选项配置来解决这类问题。")])]),t._v(" "),s("h2",{attrs:{id:"autoblur"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#autoblur"}},[t._v("#")]),t._v(" autoBlur")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("true")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：在滚动之前会让当前激活的元素（input、textarea）自动失去焦点。")])]),t._v(" "),s("h2",{attrs:{id:"stoppropagation"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#stoppropagation"}},[t._v("#")]),t._v(" stopPropagation")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("false")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：是否阻止事件冒泡。多用在嵌套 scroll 的场景。")])]),t._v(" "),s("h2",{attrs:{id:"bindtotarget"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#bindtotarget"}},[t._v("#")]),t._v(" bindToTarget")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("boolean")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("false")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：将 touch 或者 mouse 事件绑定在 "),s("code",[t._v("content")]),t._v(" 元素而不是容器 "),s("code",[t._v("wrapper")]),t._v("上，多用于 "),s("RouterLink",{attrs:{to:"/zh-CN/plugins/movable.html"}},[t._v("movable 场景")]),t._v("。")],1)]),t._v(" "),s("h2",{attrs:{id:"autoenddistance"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#autoenddistance"}},[t._v("#")]),t._v(" autoEndDistance")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("5")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：当手指操作幅度过大，滑出视口导致可能没有触发 touchend 事件，因此 autoEndDistance 的作用就是当手指即将脱离当前视口的时候，自动调用 touchend 事件。默认距离边界 5px 的时候，结束滚动。")])]),t._v(" "),s("h2",{attrs:{id:"outofboundarydampingfactor"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#outofboundarydampingfactor"}},[t._v("#")]),t._v(" outOfBoundaryDampingFactor")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("1 / 3")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：当超过边界的时候，进行阻尼行为，阻尼因子越小，阻力越大，取值范围：[0, 1]。")])]),t._v(" "),s("h2",{attrs:{id:"specifiedindexascontent"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#specifiedindexascontent"}},[t._v("#")]),t._v(" specifiedIndexAsContent "),s("Badge",{attrs:{text:"2.0.4"}})],1),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("number")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("0")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：指定 "),s("code",[t._v("wrapper")]),t._v(" 对应索引的子元素作为 "),s("code",[t._v("content")]),t._v("，默认情况下 BetterScroll 采用的是 "),s("code",[t._v("wrapper")]),t._v(" 的第一个子元素作为 content。")])]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("wrapper"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("conten1-item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("1.1"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("conten1-item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("1.2"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("conten2-item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("2.1"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("conten2-item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("2.2"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 针对以上 DOM 结构，在 BetterScroll 版本 <= 2.0.3，内部只会使用 wrapper.children[0]，也就是 div.content1 作为 content")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 当 版本 >= 2.0.4 的时候，可以通过 specifiedIndexAsContent 配置项来指定 content")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bs "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BScroll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("specifiedIndexAsContent")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 使用 div.content2 作为 BetterScroll 的 content")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"quadrant"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#quadrant"}},[t._v("#")]),t._v(" quadrant "),s("Badge",{attrs:{text:"2.3.0"}})],1),t._v(" "),s("ul",[s("li",[s("strong",[t._v("类型")]),t._v("："),s("code",[t._v("1 | 2 | 3 | 4")])]),t._v(" "),s("li",[s("strong",[t._v("默认值")]),t._v("："),s("code",[t._v("1")])]),t._v(" "),s("li",[s("strong",[t._v("作用")]),t._v("：当 BetterScroll 的 wrapper DOM 的祖先元素被 CSS 强制旋转之后，原先的 x 以及 y 方向的位移需要发生一定的变换才能保证交互合理")])]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* wrapper 的父元素强制旋转 */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".container")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rotate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("90deg"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("wrapper"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content-item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("1.1"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n         "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content-item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("1.2"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bs "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BScroll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("quadrant")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("ol",[s("li",[t._v("当 wrapper 的父元素或者祖先元素旋转的角度为 (315, 45]，quadrant 保持默认值即可；")]),t._v(" "),s("li",[t._v("当 wrapper 的父元素或者祖先元素旋转的角度为 (45, 135]，quadrant "),s("strong",[t._v("建议")]),t._v("为 "),s("code",[t._v("2")]),t._v("，尤其是 90 度，quadrant "),s("strong",[t._v("必须")]),t._v("为 "),s("code",[t._v("2")]),t._v("；")]),t._v(" "),s("li",[t._v("当 wrapper 的父元素或者祖先元素旋转的角度为 (135, 225]，quadrant "),s("strong",[t._v("建议")]),t._v("为 "),s("code",[t._v("3")]),t._v("，尤其是 180 度，quadrant "),s("strong",[t._v("必须")]),t._v("为 "),s("code",[t._v("3")]),t._v("；")]),t._v(" "),s("li",[t._v("当 wrapper 的父元素或者祖先元素旋转的角度为 (225, 315]，quadrant "),s("strong",[t._v("建议")]),t._v("为 "),s("code",[t._v("4")]),t._v("，尤其是 270 度，quadrant "),s("strong",[t._v("必须")]),t._v("为 "),s("code",[t._v("4")]),t._v("；")]),t._v(" "),s("li",[t._v("当旋转角度比较特殊的时候，比如 30 度，200 度，你可能不满意内置的变换逻辑，你可以通过 "),s("code",[t._v("coordinateTransformation")]),t._v(" hook 来自定义你自己的变换逻辑。")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" bs "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BScroll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.wrapper'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("quadrant")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 保持默认即可")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nbs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scroller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("actions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hooks"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("on")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n   bs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scroller"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("actions"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hooks"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eventTypes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("coordinateTransformation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("transformateDeltaData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 获取用户手指移动的距离")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" originDeltaX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" transformateDeltaData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("deltaX\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" originDeltaY "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" transformateDeltaData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("deltaY\n\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 变换位移")]),t._v("\n      transformateDeltaData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("deltaX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" originDeltaY\n      transformateDeltaData"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("deltaY "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" originDeltaX\n\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// transformateDeltaData.deltaX 最终作用在 BetterScroll content DOM 的 translateX")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// transformateDeltaData.deltaY 最终作用在 BetterScroll content DOM 的 translateY")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("例如：使用 CSS 将横向滚动的 BetterScroll 翻转。")]),t._v(" "),s("demo",{attrs:{"qrcode-url":"core/horizontal-rotated"}},[s("template",{slot:"code-template"},[s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("horizontal-rotated-container"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("description"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Flipping layout via CSS"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("scroll-wrapper"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("scroll"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("scroll-content"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("scroll-item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("num in nums"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("num"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{num}}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])])])])])]),t._v(" "),s("template",{slot:"code-script"},[s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text/ecmascript-6"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" BScroll "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@better-scroll/core'")]),t._v("\n\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("nums")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("8")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mounted")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("beforeDestroy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("destroy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("bs "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BScroll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("scroll"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("scrollX")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("scrollY")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// v2.3.0")]),t._v("\n          "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("quadrant")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// rotate180")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])])])])])]),t._v(" "),s("template",{slot:"code-style"},[s("div",{staticClass:"language-styl extra-class"},[s("pre",{pre:!0,attrs:{class:"language-styl"}},[s("code",[t._v("<style lang="),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"stylus"')]),t._v(" rel="),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"stylesheet/stylus"')]),t._v(" scoped>\n\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* flipping by CSS */")]),t._v("\n.scroll-wrapper")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token func"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("rotate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("180")]),s("span",{pre:!0,attrs:{class:"token unit"}},[t._v("deg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".horizontal-rotated-container")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".description")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-bottom")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("40")]),s("span",{pre:!0,attrs:{class:"token unit"}},[t._v("px")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),t._v(" center")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".scroll-wrapper")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token unit"}},[t._v("px")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("250")]),s("span",{pre:!0,attrs:{class:"token unit"}},[t._v("px")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),t._v(" relative")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("overflow")]),t._v(" hidden")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("white-space")]),t._v(" nowrap")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" auto")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token unit"}},[t._v("px")]),t._v(" solid "),s("span",{pre:!0,attrs:{class:"token hexcode"}},[t._v("#ccc")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".scroll-content")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),t._v(" inline-block")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".scroll-item")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token unit"}},[t._v("px")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token unit"}},[t._v("px")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("line-height")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),s("span",{pre:!0,attrs:{class:"token unit"}},[t._v("px")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("24")]),s("span",{pre:!0,attrs:{class:"token unit"}},[t._v("px")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),t._v(" bold")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),t._v(" center")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),t._v(" inline-block")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("&:nth-child(2n)")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token hexcode"}},[t._v("#f3f5f7")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("&:nth-child(2n+1)")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token property-declaration"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token hexcode"}},[t._v("#42b983")])]),t._v("\n</style>")])])])]),t._v(" "),s("core-horizontal-rotated",{attrs:{slot:"demo"},slot:"demo"})],2)],1)}),[],!1,null,null,null);s.default=e.exports}}]);
    2.