| 1 |
- (window.webpackJsonp=window.webpackJsonp||[]).push([[101],{806:function(t,a,s){"use strict";s.r(a);var r=s(41),e=Object(r.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"介绍"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#介绍"}},[t._v("#")]),t._v(" 介绍")]),t._v(" "),a("h2",{attrs:{id:"betterscroll-是什么"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#betterscroll-是什么"}},[t._v("#")]),t._v(" BetterScroll 是什么")]),t._v(" "),a("p",[t._v("BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 "),a("a",{attrs:{href:"https://github.com/cubiq/iscroll",target:"_blank",rel:"noopener noreferrer"}},[t._v("iscroll"),a("OutboundLink")],1),t._v(" 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。")]),t._v(" "),a("p",[t._v("BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。")]),t._v(" "),a("h2",{attrs:{id:"示例"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#示例"}},[t._v("#")]),t._v(" 示例")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://better-scroll.github.io/examples/",target:"_blank",rel:"noopener noreferrer"}},[t._v("地址"),a("OutboundLink")],1)]),t._v(" "),a("img",{attrs:{"data-zoomable":"",src:t.$withBase("/assets/images/qrcode.png"),alt:"示例"}}),t._v(" "),a("h2",{attrs:{id:"起步"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#起步"}},[t._v("#")]),t._v(" 起步")]),t._v(" "),a("p",[t._v("BetterScroll 最常见的应用场景是列表滚动，我们来看一下它的 html 结构。")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("wrapper"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ul")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("..."),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("li")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("..."),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("li")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n ...\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("ul")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 这里可以放一些其它的 DOM，但不会影响滚动 --\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("上面的代码中 BetterScroll 是作用在外层 "),a("strong",[t._v("wrapper")]),t._v(" 容器上的，滚动的部分是 "),a("strong",[t._v("content")]),t._v(" 元素。这里要注意的是，BetterScroll 默认处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。")]),t._v(" "),a("p",[t._v("最简单的初始化代码如下：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" BScroll "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@better-scroll/core'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" wrapper "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("querySelector")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.wrapper'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" scroll "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BScroll")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("wrapper"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("BetterScroll 提供了一个类，实例化的第一个参数是一个原生的 DOM 对象。当然，如果传递的是一个字符串，BetterScroll 内部会尝试调用 querySelector 去获取这个 DOM 对象。")]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("注意")]),t._v(" "),a("p",[t._v("BetterScroll 2.X 里面，我们将 1.X 耦合的 feature 拆分至插件，以达到按需加载、减少包体积的目的。因此，"),a("code",[t._v("@better-scroll/core")]),t._v(" 只提供了最核心的滚动能力。如果想要实现"),a("strong",[t._v("上拉加载")]),t._v("、"),a("strong",[t._v("下拉刷新")]),t._v("的功能，你需要使用对应的"),a("a",{attrs:{href:"/zh-CN/plugins"}},[t._v("插件")]),t._v("。")])]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("提示")]),t._v(" "),a("p",[t._v("版本 2.0.4 的 BetterScroll 可以通过 "),a("RouterLink",{attrs:{to:"/zh-CN/guide/base-scroll-options.html#specifiedindexascontent-2-0-4"}},[t._v("specifiedIndexAsContent")]),t._v(" 来指定 wrapper 的某个子元素作为 content。")],1)]),t._v(" "),a("h2",{attrs:{id:"滚动原理"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#滚动原理"}},[t._v("#")]),t._v(" 滚动原理")]),t._v(" "),a("p",[t._v("很多人已经用过 BetterScroll，我收到反馈最多的问题是：")]),t._v(" "),a("blockquote",[a("p",[t._v("BetterScroll 初始化了， 但是没法滚动。")])]),t._v(" "),a("p",[t._v("不能滚动是现象，我们得搞清楚这其中的根本原因。在这之前，我们先来看一下浏览器的滚动原理：\n浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。")]),t._v(" "),a("p",[t._v("BetterScroll 也是一样的原理，我们可以用一张图更直观的感受一下：")]),t._v(" "),a("img",{attrs:{"data-zoomable":"",src:t.$withBase("/assets/images/schematic.png"),alt:"原理图"}}),t._v(" "),a("p",[t._v("绿色部分为 wrapper，也就是父容器，它会有"),a("strong",[t._v("固定的高度")]),t._v("。黄色部分为 content，它是父容器的"),a("strong",[t._v("第一个子元素")]),t._v("，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 BetterScroll 的滚动原理。")]),t._v(" "),a("h2",{attrs:{id:"betterscroll-在-mvvm-框架的应用"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#betterscroll-在-mvvm-框架的应用"}},[t._v("#")]),t._v(" BetterScroll 在 MVVM 框架的应用")]),t._v(" "),a("p",[t._v("我之前写过一篇"),a("a",{attrs:{href:"https://zhuanlan.zhihu.com/p/27407024",target:"_blank",rel:"noopener noreferrer"}},[t._v("当 BetterScroll 遇见 Vue"),a("OutboundLink")],1),t._v("，也希望大家投稿，分享一下 BetterScroll 在其它框架下的使用心得。")]),t._v(" "),a("p",[t._v("一款超赞的基于 Vue 实现的组件库 "),a("a",{attrs:{href:"https://github.com/didi/cube-ui/",target:"_blank",rel:"noopener noreferrer"}},[t._v("cube-ui"),a("OutboundLink")],1),t._v("。")]),t._v(" "),a("h2",{attrs:{id:"betterscroll-在实战项目中的运用"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#betterscroll-在实战项目中的运用"}},[t._v("#")]),t._v(" BetterScroll 在实战项目中的运用")]),t._v(" "),a("p",[t._v("如果你想学习 BetterScroll 在实战项目中的运用，也可以去学习我的 2 门实战课程。")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://coding.imooc.com/class/74.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue.js 高仿外卖饿了么实战课程"),a("OutboundLink")],1)]),t._v(" "),a("p",[a("a",{attrs:{href:"http://ustbhuangyi.com/sell/",target:"_blank",rel:"noopener noreferrer"}},[t._v("项目演示地址"),a("OutboundLink")],1)]),t._v(" "),a("p",[a("img",{attrs:{src:"https://qr.api.cli.im/qr?data=http%253A%252F%252Fustbhuangyi.com%252Fsell%252F%2523%252Fgoods&level=H&transparent=false&bgcolor=%23ffffff&forecolor=%23000000&blockpixel=12&marginblock=1&logourl=&size=280&kid=cliim&key=686203a49c4613080b5b3004323ff977",alt:"二维码"}})]),t._v(" "),a("p",[a("a",{attrs:{href:"http://coding.imooc.com/class/107.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue.js 音乐 App 高级实战课程"),a("OutboundLink")],1)]),t._v(" "),a("p",[a("a",{attrs:{href:"http://ustbhuangyi.com/music/",target:"_blank",rel:"noopener noreferrer"}},[t._v("项目演示地址"),a("OutboundLink")],1)]),t._v(" "),a("p",[a("img",{attrs:{src:"https://qr.api.cli.im/qr?data=http%253A%252F%252Fustbhuangyi.com%252Fmusic%252F&level=H&transparent=false&bgcolor=%23ffffff&forecolor=%23000000&blockpixel=12&marginblock=1&logourl=&size=280&kid=cliim&key=731bbcc2b490454d2cc604f98539952c",alt:"二维码"}})])])}),[],!1,null,null,null);a.default=e.exports}}]);
|
