cbvirtua 1.0.109 → 1.0.115

package/better-scroll-dev/better-scroll-dev/packages/vuepress-docs/docs/zh-CN/plugins/README.md

@@ -1,124 +0,0 @@
-# 插件
-
-## 为什么要有插件
-
-为了解耦 BetterScroll 1.x 的各个 feature 的功能，防止 bundle 体积无限制的增加。在 2.x 的架构设计当中，采用了『插件化』 的架构设计。对于 1.x 的各个 feature，在 2.x 都将以 Plugin 的形式实现。
-
-已有的插件：
-- [pulldown](./pulldown.html)
-- [pullup](./pullup.html)
-- [scrollbar](./scroll-bar.html)
-- [slide](./slide.html)
-- [wheel](./wheel.html)
-- [zoom](./zoom.html)
-- [mouse-wheel](./mouse-wheel.html)
-- [observe-dom](./observe-dom.html)
-- [observe-image](./observe-image.html)
-- [nested-scroll](./nested-scroll.html)
-- [infinity](./infinity.html)
-- [movable](./movable.html)
-- [indicators](./indicators.html)
-
-非常欢迎大家参与插件的贡献，在此之前，你需要花点时间了解这个[如何编写插件](./how-to-write.html)。
-
-## 使用插件
-
-通过全局方法 `BScroll.use()` 使用插件。它需要在你调用 `new BScroll()` 之前完成：
-
-```js
-  import BScroll from '@better-scroll/core'
-  import Plugin from 'somewhere'
-
-  BScroll.use(Plugin)
-  new BScroll('.wrapper', {
-    pluginKey: {} // pluginKey 对应 Plugin 类上静态属性 pluginName 的值，否则插件无法实例化
-  })
-```
-
-## 使用插件的方法和属性
-
-插件中可能会暴露一些方法和属性，这些方法和属性在你执行完 `new BScroll()` 之后，会通过 `Object.defineProperty` 的方式代理至 `bs`。例如，zoom 插件中提供了 `zoomTo` 方法，你可以通过下面的方式来使用：
-
-```js
-  import BScroll from '@better-scroll/core'
-  import Zoom from '@better-scroll/zoom'
-
-  BScroll.use(Zoom)
-
-  const bs = new BScroll('#scroll-wrapper', {
-    freeScroll: true,
-    scrollX: true,
-    scrollY: true,
-    disableMouse: true,
-    useTransition: true,
-    zoom: {
-      start: 1,
-      min: 0.5,
-      max: 2
-    }
-  })
-
-  bs.zoomTo(1.5, 0, 0) // 不用关心 zoom 插件实例，直接通过 bs 获取暴露的属性或者方法。
-```
-
-## 使用插件的事件
-
-和方法、属性类似，插件中暴露的事件最终也会被代理至 `bs`。例如，zoom 插件中提供了 `zoomStart` 事件，你可以通过下面的方式来注册事件侦听器：
-
-```js
-  import BScroll from '@better-scroll/core'
-  import Zoom from '@better-scroll/zoom'
-
-  BScroll.use(Zoom)
-
-  const bs = new BScroll('#scroll-wrapper', {
-    freeScroll: true,
-    scrollX: true,
-    scrollY: true,
-    zoom: {
-      start: 1,
-      min: 0.5,
-      max: 2
-    }
-  })
-
-  bs.on('zoomStart', zoomStartHandler)
-  // so, you can do anything in zoomStartHandler
-```
-
-## 具备所有插件能力的 BetterScroll
-
-考虑到一个个注册插件比较麻烦，如果你的项目用到 BetterScroll 的全部插件能力，我们提供了一劳永逸的方案。
-
-
-```js
-  import BScroll from 'better-scroll'
-
-  const bs = new BScroll('#scroll-wrapper', {
-    pullUpLoad: true,
-    pullDownRefresh: true,
-    scrollbar: true,
-    // 等等
-  })
-```
-
-::: warning 注意
-引用全部的 BetterScroll 可能对你的 bundle 体积有很大的冲击，而且随着 BetterScroll 的功能扩展，体积会无限制的增加，**请按需引入**。
-:::
-
-::: warning 注意
-通常情况下，你应该关注 BetterScroll 实例暴露出来的属性和方法，因为对于插件实例上的属性和方法，都已经代理到 bs 上面，如果你真的需要关心插件实例，你也可以通过 `bs.plugins` 来获取所有插件的信息。
-
-```js
-  import BScroll from '@better-scroll/scroll'
-  import zoom from '@better-scroll/zoom'
-
-  BScroll.use(zoom)
-
-  const bs = new BScroll('.wrapper', {
-    zoom: true
-  })
-
-  console.log(bs.plugins.zoom) // 获取对应插件实例
-```
-:::

package/better-scroll-dev/better-scroll-dev/packages/vuepress-docs/docs/zh-CN/plugins/compose-plugins.md

@@ -1,12 +0,0 @@
-# 插件的高阶使用
-在许多场景下，单插件的better-scroll实例（以下简称`BS`）很难满足我们当下的业务需求，往往我们需要通过多个插件的组合使用来实现我们想要的效果。
-
-## pullup-pulldown
-
-
-## pullup-pulldown-slide
-
-## pullup-pulldown-nestedscroll
-
-## nestedscroll-slide
-

package/better-scroll-dev/better-scroll-dev/packages/vuepress-docs/docs/zh-CN/plugins/how-to-write.md

@@ -1,151 +0,0 @@
-# 如何写一个插件
-
-### 构思插件的功能
-
-```js
-  import BScroll from '@better-scroll/core'
-  import MyPlugin from '@better-scroll/my-plugin'
-
-  BScroll.use(MyPlugin)
-
-  const bs = new BScroll('.wrapper', {
-    myPlugin: {
-      scrollText: 'I am scrolling',
-      scrollEndText: 'Scroll has ended'
-    },
-    // 或者
-    myPlugin: true
-  })
-
-  // 使用插件暴露到 bs 的事件
-  bs.on('printScrollEndText', (scrollEndText) => {
-    console.log(scrollEndText) // 打印 "Scroll has ended, position is (xx, yy)"
-  })
-
-  // 使用插件代理到 bs 实例上的方法
-  bs.printScrollText() // 打印 "I am scrolling"
-```
-
-### 编写插件
-
-1. **TypeScript 声明合并以及暴露插件方法**
-
-```typescript
-import BScroll from '@better-scroll/core'
-
-export type MyPluginOptions = Partial<MyPluginConfig> | true
-
-type MyPluginConfig = {
-  scrollText: string,
-  scrollEndText: string
-}
-
-interface PluginAPI {
-  printScrollText(): void
-}
-
-declare module '@better-scroll/core' {
-  interface CustomOptions {
-    myPlugin?: MyPluginOptions
-  }
-
-  interface CustomAPI {
-    myPlugin: PluginAPI
-  }
-}
-```
-
-这样做的好处，就是为了在引入 `myPlugin` 插件并且实例化 BetterScroll 的时候，能够有对应的 Options 提示以及 bs 能够有对应的方法提示，以 pulldown 插件为例：
-
-<img data-zoomable :src="$withBase('/assets/images/tip1.png')" alt="">
-
-<img data-zoomable :src="$withBase('/assets/images/tip2.png')" alt="">
-
-2. **编写插件主体**
-
-    - **BetterScroll 的插件需要是一个类，并且具有以下特性：**
-
-      - 静态的 pluginName 属性。
-      - 实现 PluginAPI 接口（当且仅当需要把插件方法代理至 bs）。
-      - constructor 的第一个参数就是 BetterScroll 实例 `bs`，你可以通过 bs 的**事件**或者**钩子**来注入自己的逻辑。
-
-      ```typescript
-        export default class MyPlugin implements PluginAPI {
-          static pluginName = 'myPlugin'
-          public options: MyPluginConfig
-          constructor(public scroll: BScroll){
-            this.handleOptions()
-
-            this.handleBScroll()
-
-            this.registerHooks()
-          }
-        }
-      ```
-
-    - **handleOptions**
-
-      合并用户传入的 options，收缩它的类型。
-
-      ```typescript
-        import { extend } from '@better-scroll/shared-utils'
-        export default class MyPlugin {
-          private handleOptions() {
-            const userOptions = (this.scroll.options.myPlugin === true
-              ? {}
-              : this.scroll.options.myPlugin) as Partial<MyPluginConfig>
-            const defaultOptions: MyPluginConfig = {
-              scrollText: 'I am scrolling',
-              scrollEndText: 'Scroll has ended'
-            }
-            this.options = extend(defaultOptions, userOptions)
-          }
-        }
-      ```
-
-    - **handleBScroll**
-
-      代理事件以及方法至 BetterScroll 实例。
-
-      ```typescript
-        export default class MyPlugin implements PluginAPI {
-          private handleBScroll() {
-            const propertiesConfig = [
-              {
-                key: 'printScrollText',
-                sourceKey: 'plugins.myPlugin.printScrollText'
-              }
-            ]
-            // 将 myPlugin.printScrollText 代理至 bs.printScrollText
-            this.scroll.proxy(propertiesConfig)
-            // 注册 printScrollEndText 事件至 bs，以至于用户可以通过 bs.on('printScrollEndText', handler) 来订阅事件
-            this.scroll.registerType(['printScrollEndText'])
-          }
-
-          printScrollText() {
-            console.log(this.options.scrollText)
-          }
-        }
-      ```
-
-    - **registerHooks**
-
-      钩入 bs 的钩子，实现插件的逻辑，并且派发插件自定义的事件。
-
-      ```typescript
-        export default class MyPlugin implements PluginAPI {
-          private registerHooks() {
-            const scroll = this.scroll
-            scroll.on(scroll.eventTypes.scrollEnd, ({ x, y }) => {
-              scroll.trigger(
-                scroll.eventTypes.printScrollEndText,
-                `${this.options.scrollEndText}, position is (${x}, ${y})`
-              )
-            })
-          }
-        }
-      ```
-
-恭喜你，一个简单的 BetterScroll 插件就已经完成啦，如果结合你的场景，需要更复杂的插件，可以仔细阅读 [事件与钩子大全](../guide/base-scroll-api.html#事件-vs-钩子)，它能很好的帮助你来完成一款独特的插件。
-
-查看[完整的 repo](https://github.com/better-scroll/plugin-tutorial)，以及[线上例子](https://better-scroll.github.io/plugin-tutorial/)

package/better-scroll-dev/better-scroll-dev/packages/vuepress-docs/docs/zh-CN/plugins/indicators.md

@@ -1,107 +0,0 @@
-# indicators <Badge text="2.2.0" />
-
-## 介绍
-
-indicators 赋予了联动另外一个 BetterScroll 的能力，借助于此，可以实现**视觉滚动差**、**放大镜**等效果。
-
-::: tip 提示
-这是一个非常强大并且具有创造力的插件，限制你的只有你的想象力！
-:::
-
-## 安装
-
-```bash
-npm install @better-scroll/indicators --save
-
-// or
-
-yarn add @better-scroll/indicators
-```
-
-## 使用
-
-首先引入 indicators 插件，并通过静态方法 `BScroll.use()` 注册插件
-
-```js
-import BScroll from '@better-scroll/core'
-import Indicators from '@better-scroll/indicators'
-
-BScroll.use(Indicators)
-```
-
-接着在 `options` 传入正确的配置。
-
-```js
-new BScroll('.wrapper', {
-  indicators: {
-    // 详情可以参考下面的 demo
-    relationElement: "联动的元素 DOM"
-  }
-})
-```
-## 示例
-
-  - **放大镜效果**
-
-    <demo qrcode-url="indicators/minimap" :render-code="true">
-      <template slot="code-template">
-        <<< @/examples/vue/components/indicators/minimap.vue?template
-      </template>
-      <template slot="code-script">
-        <<< @/examples/vue/components/indicators/minimap.vue?script
-      </template>
-      <template slot="code-style">
-        <<< @/examples/vue/components/indicators/minimap.vue?style
-      </template>
-      <indicators-minimap slot="demo"></indicators-minimap>
-    </demo>
-
-  - **视觉滚动差**
-
-    <demo qrcode-url="indicators/parallax-scroll">
-      <template slot="code-template">
-        <<< @/examples/vue/components/indicators/parallax-scroll.vue?template
-      </template>
-      <template slot="code-script">
-        <<< @/examples/vue/components/indicators/parallax-scroll.vue?script
-      </template>
-      <template slot="code-style">
-        <<< @/examples/vue/components/indicators/parallax-scroll.vue?style
-      </template>
-      <indicators-parallax-scroll slot="demo"></indicators-parallax-scroll>
-    </demo>
-
-## indicators 选项对象
-
-### relationElement
-
-  - **类型**：`HTMLElement`
-
-  与另外一个 BetterScroll 关联的容器元素，正如上面的 demo， `div.scroll-indicator` 就是 releationElement。**releationElement 必须由用户传入，并且拥有子元素**。
-
-### relationElementHandleElementIndex
-
-  - **类型**：`number`
-  - **默认值**：`0`
-
-  指定 releationElement 的第几个子元素作为操控的元素，详细可以参考以上的 demo。
-
-### ratio
-
-  - **类型**：`number | Ratio | undefined`
-  - **默认值**：`undefined`
-
-  ```ts
-  type Ratio = {
-    x: number // 指定 x 方向滚动距离的比例
-    y: number // 指定 y 方向滚动距离的比例饿
-  }
-  ```
-  指定 releationElement 与 BetterScroll 滚动距离的比例。一般情况下，**插件内部会自动计算**两者的滚动比例，但是你也可以手动指定比例，来实现 `视觉滚动差` 的效果。详细可以参考以上的 Demo。
-
-### interactive
-
-  - **类型**：`boolean | undefined`
-  - **默认值**：`undefined`
-
-  决定 relationElement 的第 relationElementHandleElementIndex 个子元素是否可以交互，当它置成 false 的时候，则不响应 touch / mouse 事件。

package/better-scroll-dev/better-scroll-dev/packages/vuepress-docs/docs/zh-CN/plugins/infinity.md

@@ -1,73 +0,0 @@
-# infinity
-
-## 介绍
-
-infinity 插件为 BetterScroll 提供了无限滚动的能力。如果有大量的列表数据需要渲染，可以使用 infinity 插件，此时 BetterScroll 只会渲染一定数量的 DOM 元素，从而使页面在大量数据时依然保持流畅滚动。
-
-> 注意：除非你有大量的数据渲染需求，否则使用 core 即可。
-
-## 安装
-
-```shell
-npm install @better-scroll/infinity --save
-
-// or
-
-yarn add @better-scroll/infinity
-```
-
-## 使用
-
-首先引入 infinity 插件，并通过静态方法 `BScroll.use()` 初始化插件
-
-```js
-import BScroll from '@better-scroll/core'
-import InfinityScroll from '@better-scroll/infinity'
-
-BScroll.use(InfinityScroll)
-```
-
-然后，实例化 BetterScroll 时需要传入相关配置项 infinity:
-
-```typescript
-new BScroll('.bs-wrapper', {
-  scrollY: true,
-  infinity: {
-    fetch(count) {
-      // 获取大于 count 数量的数据，该函数是异步的，它需要返回一个 Promise。
-      // case 1. resolve 数据数组Array<data>，来告诉 infinity 渲染数据，render 的第一个参数就是数据项
-      // case 2. resolve(false), 来停止无限滚动
-    },
-    render(item, div?: HTMLElement) {
-      // item 是 fetch 函数提供的每一个数据项，
-      // div 是页面回收的 DOM，可能不存在
-      // 如果 div 不存在，你需要创建一个新的 HTMLElement 元素
-      // 必须返回一个 HTMLElement
-    },
-    createTombstone() {
-      // 必须返回一个墓碑 DOM 节点。
-    }
-  }
-})
-```
-
-::: danger 危险
-`fetch`、`render`、`createTombstone` 必须按照注释来实现，否则内部会报错。
-
-插件内部依赖 Promise，如果浏览器不支持，需要 Promise 的 Polyfill。
-:::
-
-## 示例
-
-<demo qrcode-url="infinity/" :render-code="true">
-  <template slot="code-template">
-    <<< @/examples/vue/components/infinity/default.vue?template
-  </template>
-  <template slot="code-script">
-    <<< @/examples/vue/components/infinity/default.vue?script
-  </template>
-  <template slot="code-style">
-    <<< @/examples/vue/components/infinity/default.vue?style
-  </template>
-  <infinity-default slot="demo"></infinity-default>
-</demo>