| 1 |
- (window.webpackJsonp=window.webpackJsonp||[]).push([[77],{782:function(t,e,a){"use strict";a.r(e);var s=a(41),r=Object(s.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"introduction"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#introduction"}},[t._v("#")]),t._v(" Introduction")]),t._v(" "),e("h2",{attrs:{id:"what-is-betterscroll"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#what-is-betterscroll"}},[t._v("#")]),t._v(" What is BetterScroll ?")]),t._v(" "),e("p",[t._v("BetterScroll is a plugin which is aimed at solving scrolling circumstances on the mobile side (PC supported already). The core is inspired by the implementation of "),e("a",{attrs:{href:"https://github.com/cubiq/iscroll",target:"_blank",rel:"noopener noreferrer"}},[t._v("iscroll"),e("OutboundLink")],1),t._v(", so the APIs of BetterScroll are compatible with iscroll on the whole. What's more, BetterScroll also extends some features and optimizes for performance based on iscroll.")]),t._v(" "),e("p",[t._v("BetterScroll is implemented with plain JavaScript, which means it's dependency free.")]),t._v(" "),e("h2",{attrs:{id:"demo"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#demo"}},[t._v("#")]),t._v(" Demo")]),t._v(" "),e("img",{attrs:{"data-zoomable":"",src:t.$withBase("/assets/images/qrcode.png"),alt:"demo"}}),t._v(" "),e("h2",{attrs:{id:"getting-started"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getting-started"}},[t._v("#")]),t._v(" Getting started")]),t._v(" "),e("p",[t._v("The most common application scenario of BetterScroll is list scrolling. Let's see its HTML:")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("wrapper"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ul")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("content"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("..."),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("li")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("..."),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("li")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n ...\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("ul")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- you can put some other DOMs here, it won't affect the scrolling --\x3e")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),e("p",[t._v("In the code above, BetterScroll is applied to the outer "),e("code",[t._v("wrapper")]),t._v(" container, and the scrolling part is "),e("code",[t._v("content")]),t._v(" element. Pay attention that BetterScroll handles the scroll of the first child element (content) of the container ("),e("code",[t._v("wrapper")]),t._v(") by default, which means other elements will be ignored.")]),t._v(" "),e("p",[t._v("The simplest initialization code is as follow:")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" BScroll "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@better-scroll/core'")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" wrapper "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("querySelector")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.wrapper'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("let")]),t._v(" scroll "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("BScroll")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("wrapper"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("p",[t._v("BetterScroll provides a class whose first parameter is a plain DOM object when instantiated. Certainly, BetterScroll inside would try to use querySelector to get the DOM object.")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("WARNING")]),t._v(" "),e("p",[t._v("In BetterScroll 2.X, we split the 1.X-coupled feature into the plugin to achieve on-demand loading and reduce the volume of the package. Therefore, "),e("code",[t._v("@better-scroll/core")]),t._v(" only provides the most core scrolling capabilities. If you want to implement the "),e("strong",[t._v("pull-up load")]),t._v(", "),e("strong",[t._v("pull-down refresh")]),t._v(" function, you need to use the corresponding [plugin] (/en-US/plugins).")])]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),e("p",[t._v("BetterScroll v2.0.4 can use "),e("RouterLink",{attrs:{to:"/en-US/guide/base-scroll-options.html#specifiedindexascontent-2-0-4"}},[t._v("specifiedIndexAsContent")]),t._v(" to specify a child element of the wrapper as BetterScroll's content.")],1)]),t._v(" "),e("h2",{attrs:{id:"the-principle-of-scrolling"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#the-principle-of-scrolling"}},[t._v("#")]),t._v(" The principle of scrolling")]),t._v(" "),e("p",[t._v("Many developers have used BetterScroll, but the most common problem they have met is:")]),t._v(" "),e("blockquote",[e("p",[t._v("I have initiated BetterScroll, but the content can't scroll.")])]),t._v(" "),e("p",[t._v("The phenomenon is 'the content can't scroll' and we need to figure out the root cause. Before that, let's take a look at the browser's scrolling principle: everyone can see the browser's scroll bar. When the height of the page content exceeds the viewport height, the vertical scroll bar will appear; When the width of page content exceeds the viewport width, the horizontal bar will appear. That is to say, when the viewport can't display all the content, the browser would guide the user to scroll the screen with scroll bar to see the rest of content.")]),t._v(" "),e("p",[t._v("The principle of BetterScroll is samed as the browser. We can feel about this more obviously using a picture:")]),t._v(" "),e("img",{attrs:{"data-zoomable":"",src:t.$withBase("/assets/images/schematic.png"),alt:"schematic"}}),t._v(" "),e("p",[t._v("The green part is the wrapper, also known as the parent container, which has "),e("strong",[t._v("fixed height")]),t._v(". The yellow part is the content, which is "),e("strong",[t._v("the first child element")]),t._v(" of the parent container and whose height would grow with the size of its content. Then, when the height of the content doesn't exceed the height of the parent container, the content would not scroll. Once exceeded, the content can be scrolled. That is the principle of BetterScroll.")]),t._v(" "),e("h2",{attrs:{id:"using-betterscroll-with-mvvm-frameworks"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#using-betterscroll-with-mvvm-frameworks"}},[t._v("#")]),t._v(" Using BetterScroll with MVVM frameworks")]),t._v(" "),e("p",[t._v("I wrote an article "),e("a",{attrs:{href:"https://zhuanlan.zhihu.com/p/27407024",target:"_blank",rel:"noopener noreferrer"}},[t._v("When BetterScroll meets Vue"),e("OutboundLink")],1),t._v(" (in Chinese). I also hope that developers can contribute to share the experience of using BetterScroll with other frameworks.")]),t._v(" "),e("p",[t._v("A fantastic mobile ui lib implement by Vue: "),e("a",{attrs:{href:"https://github.com/didi/cube-ui/",target:"_blank",rel:"noopener noreferrer"}},[t._v("cube-ui"),e("OutboundLink")],1)]),t._v(" "),e("h2",{attrs:{id:"using-betterscroll-in-the-real-project"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#using-betterscroll-in-the-real-project"}},[t._v("#")]),t._v(" Using BetterScroll in the real project")]),t._v(" "),e("p",[t._v("If you want to learn how to use BetterScroll in the real project，you can learn my two practical courses(in Chinese)。")]),t._v(" "),e("p",[e("a",{attrs:{href:"https://coding.imooc.com/class/74.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("High imitating starvation takeout practical course base on Vue.js"),e("OutboundLink")],1)]),t._v(" "),e("p",[e("a",{attrs:{href:"http://ustbhuangyi.com/sell/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Project demo address"),e("OutboundLink")],1)]),t._v(" "),e("p",[e("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:"QR Code"}})]),t._v(" "),e("p",[e("a",{attrs:{href:"http://coding.imooc.com/class/107.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Music App advanced practical course base on Vue.js"),e("OutboundLink")],1)]),t._v(" "),e("p",[e("a",{attrs:{href:"http://ustbhuangyi.com/music/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Project demo address"),e("OutboundLink")],1)]),t._v(" "),e("p",[e("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:"QR Code"}})])])}),[],!1,null,null,null);e.default=r.exports}}]);
|
