cbvirtua 1.0.106 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/vuepress-docs/docs/.vuepress/public/assets/stylus/index.styl

@@ -0,0 +1,125 @@
+div[class~="language-styl"]:before {
+    content: 'stylus';
+}
+.v-popover {
+  line-height: 1
+}
+// for v-tooltip
+.tooltip {
+  display: block !important;
+  z-index: 10000;
+}
+
+.tooltip .tooltip-inner {
+  background: black;
+  color: white;
+  border-radius: 16px;
+  padding: 5px 10px 4px;
+}
+
+.tooltip .popover .popover-inner {
+      background: #f9f9f9;
+      color: black;
+      padding: 10px;
+      border-radius: 5px;
+      box-shadow: 0 5px 30px rgba(black, .1);
+}
+
+.tooltip .popover .popover-arrow {
+  border-color: #f9f9f9
+}
+
+
+.tooltip .tooltip-arrow {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+  margin: 5px;
+  border-color: black;
+  z-index: 1;
+}
+
+.tooltip[x-placement^="top"] {
+  margin-bottom: 5px;
+}
+
+.tooltip[x-placement^="top"] .tooltip-arrow {
+  border-width: 5px 5px 0 5px;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+  bottom: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.tooltip[x-placement^="bottom"] {
+  margin-top: 5px;
+}
+
+.tooltip[x-placement^="bottom"] .tooltip-arrow {
+  border-width: 0 5px 5px 5px;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-top-color: transparent !important;
+  top: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.tooltip[x-placement^="right"] {
+  margin-left: 5px;
+}
+
+.tooltip[x-placement^="right"] .tooltip-arrow {
+  border-width: 5px 5px 5px 0;
+  border-left-color: transparent !important;
+  border-top-color: transparent !important;
+  border-bottom-color: transparent !important;
+  left: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.tooltip[x-placement^="left"] {
+  margin-right: 5px;
+}
+
+.tooltip[x-placement^="left"] .tooltip-arrow {
+  border-width: 5px 0 5px 5px;
+  border-top-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+  right: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.tooltip.popover .popover-inner {
+  background: #f9f9f9;
+  color: black;
+  padding:10px;
+  border-radius: 5px;
+  box-shadow: 0 5px 10px rgba(black, .3);
+}
+
+.tooltip.popover .popover-arrow {
+  border-color: #f9f9f9;
+}
+
+.tooltip[aria-hidden='true'] {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity .15s, visibility .15s;
+}
+
+.tooltip[aria-hidden='false'] {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity .15s;
+}

package/better-scroll-dev/better-scroll-dev/packages/vuepress-docs/docs/.vuepress/sidebar/FAQ.js

@@ -0,0 +1,18 @@
+const FAQContent = {
+  'zh-CN': '常见问题',
+  'en-US': 'FAQ'
+}
+
+const getFAQSideBar = function (lang) {
+  return [
+    {
+      title: FAQContent[lang],
+      collapsable: false,
+      children: [
+        '',
+        'diagnosis'
+      ]
+    }
+  ]
+}
+module.exports = getFAQSideBar

package/better-scroll-dev/better-scroll-dev/packages/vuepress-docs/docs/.vuepress/sidebar/guide.js

@@ -0,0 +1,31 @@
+const guideContent = {
+  'zh-CN': '指南',
+  'en-US': 'Guide'
+}
+const baseScrollContent = {
+  'zh-CN': '核心滚动',
+  'en-US': 'Base Scroll'
+}
+const getGuideSideBar = function (lang) {
+  return [
+    {
+      title: guideContent[lang],
+      collapsable: false,
+      children: [
+        '',
+        'how-to-install',
+        'use'
+      ]
+    },
+    {
+      title: baseScrollContent[lang],
+      collapsable: false,
+      children: [
+        'base-scroll',
+        'base-scroll-options',
+        'base-scroll-api'
+      ]
+    }
+  ]
+}
+module.exports = getGuideSideBar

package/better-scroll-dev/better-scroll-dev/packages/vuepress-docs/docs/.vuepress/sidebar/plugins.js

@@ -0,0 +1,51 @@
+const introContent = {
+  'zh-US': '插件介绍',
+  'en-US': 'Plugins Guide'
+}
+const pluginContent = {
+  'zh-US': '插件',
+  'en-US': 'Plugins'
+}
+const highPluginContent = {
+  'zh-US': '插件的高阶使用',
+  'en-US': 'High Level Use Of Plugins'
+}
+const getPluginsSideBar = function (lang) {
+  return [
+    {
+      title: introContent[lang],
+      collapsable: false,
+      children: [
+        '',
+        'how-to-write',
+      ]
+    },
+    {
+      title: pluginContent[lang],
+      collapsable: false,
+      children: [
+        'mouse-wheel',
+        'observe-dom',
+        'observe-image',
+        'pulldown',
+        'pullup',
+        'scroll-bar',
+        'indicators',
+        'slide',
+        'wheel',
+        'zoom',
+        'nested-scroll',
+        'infinity',
+        'movable'
+      ]
+    },
+    // {
+    //   title: highPluginContent[lang],
+    //   collapsable: false,
+    //   children: [
+    //     'compose-plugins'
+    //   ]
+    // }
+  ]
+}
+module.exports = getPluginsSideBar

package/better-scroll-dev/better-scroll-dev/packages/vuepress-docs/docs/en-US/FAQ/README.md

@@ -0,0 +1,41 @@
+# FAQ
+
+### Why can't BetterScroll scroll is failed when initialization?
+
+BetterScroll scrolling principle is that the height/width of the `content` element exceeds the height/width of the `wrapper` element. Also, if your content element contains images of a non-fixed size, you must call the `refresh()` method to ensure that the height is calculated correctly after the image has been loaded. There is also a situation where the form element exists on the page. After the keyboard is popped up, the palatable height of the page is compressed, causing `bs` to not work properly, and the `refresh()` method is still need to be called.
+
+### Why can't the click event in the BetterScroll area be triggered?
+
+By default, BetterScroll blocks the browser's native click event. If you want the click event to take effect, BetterScroll dispatches a click event and the `_constructed` of the event parameter is true. The configuration items are as follows:
+
+```js
+import BScroll from '@better-scroll/core'
+
+let bs = new BScroll('./div', {
+  click: true
+})
+```
+
+### Why does my BetterScroll listen for the `scroll` hook and the listener doesn't execute?
+
+BetterScroll uses the `probeType` configuration item to decide whether to dispatch the `scroll` hook because there is some performance penalty. When the `probeType` is `2`, the event will be dispatched in real time. When the `probeType` is `3`, the event will be dispatched during the `momentum` animation. The recommended setting is `3`.
+
+```js
+import BScroll from '@better-scroll/core'
+
+let bs = new BScroll('./div', {
+  probeType: 3
+})
+```
+
+### Slide used horizontal scrolling, found that vertical scrolling in the slide area is invalid?
+
+If you want to keep your browser's native vertical scrolling, you need the following configuration items:
+
+```js
+import BScroll from '@better-scroll/core'
+
+let bs = new BScroll('./div', {
+  eventPassthrough: 'vertical'
+})
+```

package/better-scroll-dev/better-scroll-dev/packages/vuepress-docs/docs/en-US/FAQ/diagnosis.md

@@ -0,0 +1,160 @@
+# BetterScroll's "diagnosis"
+
+### [Question 1] Why can't my BetterScroll work?
+
+The problem basically lies in the **Height Calculation Error**. First of all, you must have a clear understanding of the scrolling principle of `BetterScroll`. For vertical scrolling, simply the height of the `wrapper` container is greater than the height of the `content` content, and the `translateY` is modified to achieve the purpose of scrolling. The principle of horizontal scrolling is similar. Then the calculation **Scrollable Height** is the logic necessary for `BetterScroll`. The general logic  is:
+
+  1. **Pictures with uncertain sizes**
+
+  - **Reason**
+
+    When js performs a calculation of the scrollable height, the image has not been rendered.
+
+  - **Solution**
+
+    Call `bs.refresh()` inside the callback function of the image's `onload` to ensure that the correct height of the image is calculated before calculating the **Scrollable Height**.
+
+  2. **Vue's keep-alive component**
+
+  - **Scenes**
+
+    Suppose there are two components of A and B wrapped by `keep-alive`, A component uses BetterScroll, does some operation in A component, pops up input keyboard, then enters B component, then returns to A component, `bs` is unable to scroll.
+
+  - **Reason**
+
+    Because Vue's keep-alive's cache and the input keyboard pops up, it compresses the height of the viewable area, causing the previously calculated scrollable height to be incorrect.
+
+  - **Solution**
+
+    You can call `bs.refresh()` on Vue's `activated` hook to recalculate the height or re-instantiate bs.
+
+### [Question 2] Why do brower's vertical scrolling failed after I use BetterScroll to do horizontal scrolling?
+
+BetterScroll provides a feature of `slide`. If you implement a horizontal scrollin, such as `slide`. do vertical scrolling in the `slide` area, you can't bubble to the browser, so you can't manipulate the scroll bar of the native browser.
+
+- **Reason**
+
+  The internal scrolling calculations of BetterScroll exist in the user's interaction. For example, the mobile terminal is the `touchstart/touchmove/touchend` event. The listeners of these events generally have the line `e.preventDefault()`, which will block the browser's default behavior so that the browser's scrollbar cannot be scrolled.
+
+- **Solution**
+
+  Configure the `eventPassthrough` attribute.
+
+  ```js
+    Let bs = new BScroll('.wrapper', {
+      eventPassthrough: 'vertical' // keep vertical native scrolling
+    })
+  ```
+
+### [Question 3] Why can't I pop up a pop-up window after using BetterScroll.
+
+- **Reason**
+
+  **question 2** has been mentioned, it is caused by `e.preventDefault()` in touchstart.
+
+- **Solution**
+
+  Option 1: Configure the `preventDefaultException` property.
+
+  ```js
+  let bs = new BScroll('.wrapper', {
+    preventDefaultException: {
+      className: /(^|\s)test(\s|$)/
+    }
+  })
+  ```
+
+  `eventDefaultException` can be used to control the `e.preventDefault()` of the `touchstart` and `touchmove` events. If the above regular expression is used to check if the class name of the currently touched target element contains `test`, if passed, Then `e.preventDefault()` will not be called.
+
+  Option 2: Configure the `preventDefault` property.
+
+  ```js
+  let bs = new BScroll('.wrapper', {
+    preventDefault: false
+  })
+  ```
+
+  `preventDefault` is set to `false`, there are some side effects, it is generally recommended to use **Option one**.
+
+  :::warning
+  The side effect is that the touch event may bubble up to the document, causing the document to be dragged. At this point you need to listen for the parent or ancestor element of the `wrapper` element, bind them to the touchmove event, and call `e.preventDefault()`.
+  :::
+
+### [Question 4] Why are the listeners for all click events inside BetterScroll content not triggered?
+
+- **Reason**
+
+  Still caused by `e.preventDefault()`. On the mobile side, if you call `e.preventDefault()` inside the logic of `touchstart/touchmove/touchend`, it will prevent the execution of the click event of it and its child elements. Therefore, BetterScroll internally manages the dispatch of the `click` event, you only need the `click` configuration item.
+
+- **Solution**
+
+  Configure the `click` attribute.
+
+  ```js
+    Let bs = new BScroll('.wrapper', {
+      click: true
+    })
+  ```
+
+### [Question 5] Why is the click event dispatched twice when Nesting BetterScroll?
+
+- **Reason**
+
+  As stated in **Question 4**, the BetterScroll dispatches a `click` event internally, and nested scenes must have two or more bs.
+
+- **Solution**
+
+  You can manage the bubbling of events by instantiating inner BetterScroll's `stopPropagation` configuration item, or by instantiating inner BetterScroll's `click` configuration item to prevent multiple triggers of clicks.
+
+  ```js
+  let innerBS = new BScroll('.wrapper', {
+    stopPropagation: true
+  })
+
+  // or
+  let innerBS = new BScroll('.wrapper', {
+    click: false
+  })
+  ```
+
+### [Question 6] Why do I listen to the scroll event of bs, why not execute the callback?
+
+- **Reason**
+
+  BetterScroll does not dispatch the `scroll` event at any time because there is a performance penalty for getting the scroll position of bs. As for whether or not to distribute, it depends on the `probeType` configuration item.
+
+- **Solution**
+
+  ```js
+    Let bs = new BScroll('.div', {
+      probeType: 3 // real-time dispatch
+    })
+  ```
+
+### [Question 7] In two vertically nested bs scenes, why move the inner bs will cause the outer layer to also be scrolled.
+
+- **Reason**
+
+  The internal logic of BetterScroll is in the body of the listener function of the touch event. Since the touch event of the internal bs is triggered, it will naturally bubble to the outer bs.
+
+- **Solution**
+
+  Since you know the reason, there are corresponding solutions. For example, when you scroll the **inner** `bs`, listen for the `scroll` event and call the **outer** `bs.disable()` to disable the **outer** `bs`. When the **inner** `bs` scrolls to the bottom, it means that you need to scroll the **outer** `bs` at this time. At this time, call the **outer** `bs.enable()` to activate the outer layer and call the **inner** `bs.disable(). ` to forbid inner scrolling. In fact, think about it, this interaction is consistent with the nested scrolling behavior of the `Web browser`, except that the browser handles the various scrolling nesting logic for you, and the BetterScroll requires your own dispatched events and exposed APIs to fulfill.
+
+  > The [scroll](https://didi.github.io/cube-ui/example/#/scroll/v-scrolls) component of `cube-ui` gives a solution to this scenario. [Code is here](https://github.com/didi/cube-ui/blob/dev/src/components/scroll/scroll.vue)
+
+### [Question 8] In the vertical bs nesting horizontal bs scene, why does the vertical movement of the horizontal bs area do not cause vertical scrolling of the outer vertical bs?
+
+- **Reason**
+
+  The reason is similar to **Question 2**, because `e.preventDefault()` affects the default scrolling behavior, causing the outer bs to not trigger the touch event.
+
+- **Solution**
+
+  The solution is to configure the `eventPassthrough` property of the inner bs to keep the default native vertical scrolling.
+
+  ```js
+    Let innerBS = new BScroll('.wrapper', {
+      eventPassthrough: 'vertical' // keep vertical native scrolling
+    })
+  ```

package/better-scroll-dev/better-scroll-dev/packages/vuepress-docs/docs/en-US/README.md

@@ -0,0 +1,14 @@
+---
+home: true
+heroText: BetterScroll 2.0
+actionText: Getting Started →
+actionLink: /en-US/guide/
+features:
+- title: Smooth scrolling effect
+  details:  Aimed at solving scrolling on the mobile side (PC supported already).
+- title: Zero dependence
+  details: Based on native JS implementation, it does not depend on any framework. Perfect for Vue, React and other MVVM frameworks.
+- title: Pluggable
+  details: Plugin support, such as Picker, PullUpLoad, PullDownRefresh, Zoom, Mouse-Wheel, Slide, Movable, Indicators, Parallax Scrolling, Magnifier and so on.
+footer: MIT Licensed | Copyright © 2018-present ustbhuangyi and theniceangel
+---

package/better-scroll-dev/better-scroll-dev/packages/vuepress-docs/docs/en-US/guide/README.md

@@ -0,0 +1,82 @@
+# Introduction
+
+## What is BetterScroll ?
+
+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 [iscroll](https://github.com/cubiq/iscroll), 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.
+
+BetterScroll is implemented with plain JavaScript, which means it's dependency free.
+
+## Demo
+
+<img data-zoomable :src="$withBase('/assets/images/qrcode.png')" alt="demo">
+
+## Getting started
+
+The most common application scenario of BetterScroll is list scrolling. Let's see its HTML:
+
+```html
+<div class="wrapper">
+  <ul class="content">
+    <li>...</li>
+    <li>...</li>
+    ...
+  </ul>
+  <!-- you can put some other DOMs here, it won't affect the scrolling -->
+</div>
+```
+
+In the code above, BetterScroll is applied to the outer `wrapper` container, and the scrolling part is `content` element. Pay attention that BetterScroll handles the scroll of the first child element (content) of the container (`wrapper`) by default, which means other elements will be ignored.
+
+The simplest initialization code is as follow:
+
+```javascript
+import BScroll from '@better-scroll/core'
+let wrapper = document.querySelector('.wrapper')
+let scroll = new BScroll(wrapper)
+```
+
+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.
+
+:::warning
+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, `@better-scroll/core` only provides the most core scrolling capabilities. If you want to implement the **pull-up load**, **pull-down refresh** function, you need to use the corresponding [plugin] (/en-US/plugins).
+:::
+
+:::tip
+BetterScroll v2.0.4 can use [specifiedIndexAsContent](./base-scroll-options.html#specifiedindexascontent-2-0-4) to specify a child element of the wrapper as BetterScroll's content.
+:::
+
+## The principle of scrolling
+
+Many developers have used BetterScroll, but the most common problem they have met is:
+
+> I have initiated BetterScroll, but the content can't scroll.
+
+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.
+
+The principle of BetterScroll is samed as the browser. We can feel about this more obviously using a picture:
+
+<img data-zoomable :src="$withBase('/assets/images/schematic.png')" alt="schematic">
+
+The green part is the wrapper, also known as the parent container, which has **fixed height**. The yellow part is the content, which is **the first child element** 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.
+
+## Using BetterScroll with MVVM frameworks
+
+I wrote an article [When BetterScroll meets Vue](https://zhuanlan.zhihu.com/p/27407024) (in Chinese). I also hope that developers can contribute to share the experience of using BetterScroll with other frameworks.
+
+A fantastic mobile ui lib implement by Vue: [cube-ui](https://github.com/didi/cube-ui/)
+
+## Using BetterScroll in the real project
+
+If you want to learn how to use BetterScroll in the real project，you can learn my two practical courses(in Chinese)。
+
+[High imitating starvation takeout practical course base on Vue.js](https://coding.imooc.com/class/74.html)
+
+[Project demo address](http://ustbhuangyi.com/sell/)
+
+![QR Code](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)
+
+[Music App advanced practical course base on Vue.js](http://coding.imooc.com/class/107.html)
+
+[Project demo address](http://ustbhuangyi.com/music/)
+
+![QR Code](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)