├── .vscode ├── settings.json └── launch.json ├── .gitignore ├── docs ├── .vuepress │ ├── style.styl │ ├── public │ │ ├── logo.png │ │ ├── icons │ │ │ ├── android-chrome-192x192.png │ │ │ └── android-chrome-512x512.png │ │ └── manifest.json │ ├── assets │ │ ├── bar-style.css │ │ └── common.styl │ ├── components │ │ ├── Demo │ │ │ ├── DemoMenu.vue │ │ │ ├── Carousel.vue │ │ │ ├── DemoIdicator.vue │ │ │ ├── Index.vue │ │ │ ├── RefreshAndLoad.vue │ │ │ └── CustomizeScrollbar.vue │ │ ├── IndexDemo.vue │ │ ├── Slot │ │ │ ├── svg-animate1.vue │ │ │ ├── svg-animate3.vue │ │ │ ├── svg-animate5.vue │ │ │ ├── svg-animate2.vue │ │ │ ├── svg-animate4.vue │ │ │ └── PullRefresh.vue │ │ ├── Api │ │ │ ├── ScrollTo.vue │ │ │ ├── GetCurrentviewDom.vue │ │ │ ├── ScrollBy.vue │ │ │ ├── ScrollIntoView.vue │ │ │ └── Stop.vue │ │ └── Guide │ │ │ ├── Rail.vue │ │ │ ├── ScrollButton.vue │ │ │ ├── Bar.vue │ │ │ ├── BaseConfig.vue │ │ │ └── ScrollPanel.vue │ ├── enhanceApp.js │ └── config.js ├── zh │ ├── demo │ │ └── README.md │ ├── guide │ │ ├── class-hook.md │ │ ├── faq.md │ │ ├── optimizing-performance.md │ │ ├── typescript.md │ │ ├── README.md │ │ ├── slot.md │ │ ├── getting-started.md │ │ ├── api.md │ │ ├── event.md │ │ └── configuration.md │ ├── donate │ │ └── README.md │ └── README.md ├── guide │ ├── faq.md │ ├── class-hook.md │ ├── optimizing-performance.md │ ├── typescript.md │ ├── README.md │ ├── slot.md │ ├── getting-started.md │ ├── api.md │ ├── event.md │ └── configuration.md ├── README.md └── demo │ └── README.md ├── .eslintrc.js ├── package.json └── README.MD /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .vscode 4 | yarn-error.log 5 | .npmrc -------------------------------------------------------------------------------- /docs/.vuepress/style.styl: -------------------------------------------------------------------------------- 1 | 2 | [id*=cnzz_stat] 3 | display none!important 4 | 5 | -------------------------------------------------------------------------------- /docs/.vuepress/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YvesCoding/vuescrolljs/HEAD/docs/.vuepress/public/logo.png -------------------------------------------------------------------------------- /docs/zh/demo/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar: false 3 | pageClass: demo-page 4 | editLink: false 5 | --- 6 | 7 | 8 | -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YvesCoding/vuescrolljs/HEAD/docs/.vuepress/public/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YvesCoding/vuescrolljs/HEAD/docs/.vuepress/public/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['plugin:vue-libs/recommended'], 4 | rules: { 5 | indent: ['error', 2, { MemberExpression: 'off' }] 6 | } 7 | } -------------------------------------------------------------------------------- /docs/.vuepress/assets/bar-style.css: -------------------------------------------------------------------------------- 1 | .__vs-layout > .__rail-is-vertical .__bar-is-vertical:hover { 2 | background-color: rgba(120, 120, 120, 0.6) !important; 3 | } 4 | .__vs-layout > .__rail-is-vertical:hover .__bar-is-vertical { 5 | opacity: 1 !important; 6 | } 7 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // 使用 IntelliSense 了解相关属性。 3 | // 悬停以查看现有属性的描述。 4 | // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "node", 9 | "request": "launch", 10 | "name": "启动程序", 11 | "program": "${file}", 12 | "args": ["build", "docs"] 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Demo/DemoMenu.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | 21 | -------------------------------------------------------------------------------- /docs/.vuepress/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Vuescroll", 3 | "short_name": "Vuescroll", 4 | "icons": [ 5 | { 6 | "src": "/icons/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/icons/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "start_url": "/index.html", 17 | "display": "standalone", 18 | "background_color": "#fff", 19 | "theme_color": "#3eaf7c" 20 | } 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuesrolljs", 3 | "version": "0.0.2", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "npx vuepress dev docs", 8 | "build": "npx vuepress build docs", 9 | "start": "npm run dev" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "MIT", 14 | "dependencies": { 15 | "css-loader": "^0.28.11", 16 | "style-loader": "^0.21.0", 17 | "vuepress": "0.13.1", 18 | "vuepress-theme-vuescroll": "^0.0.47", 19 | "vuescroll": "4.17.4", 20 | "vuescroll-carousel": "^0.0.13" 21 | }, 22 | "devDependencies": { 23 | "eslint": "^4.19.1", 24 | "eslint-plugin-vue": "^4.4.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /README.MD: -------------------------------------------------------------------------------- 1 |

2 |

Vuescroll oficial website

3 | 4 | ## Introduction 5 | 6 | - This site is built with [Vuepress](https://github.com/vuejs/vuepress). 7 | 8 | - This project use vuescroll-vuepress theme - [vuescroll-theme-vuescroll](https://github.com/YvesCoding/vuepress-theme-vuescroll) 9 | 10 | ## Install 11 | 12 | ```bash 13 | yarn install 14 | # or npm install 15 | ``` 16 | 17 | ## Dev 18 | 19 | ```bash 20 | npm run dev 21 | ``` 22 | 23 | ## Build 24 | 25 | ```bash 26 | npm run build 27 | ``` 28 | 29 | ## Deploy address 30 | 31 | `localhost:3000` 32 | -------------------------------------------------------------------------------- /docs/guide/faq.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebarDepth: 0 3 | --- 4 | 5 | # FAQ 6 | 7 | [[toc]] 8 | 9 | ## What should I do if I encounter a freeze in IOS slide mode 10 | 11 | Call [refresh](./api.md#refresh-refreshall) in `setTimeout`, 12 | 13 | ```js 14 | { 15 | handleLoadBeforeDeactivate(vm, loadDom, done) { 16 | fetchData("remoteurl").then(response => { 17 | this.data = response.data; 18 | // Note: 19 | // Because we have to let vue render the new data first 20 | // So call refersh in setTimeout 21 | setTimeout(() => { 22 | this.$refs.vs.refresh(); 23 | }, 100) 24 | }); 25 | }, 26 | } 27 | ``` 28 | 29 | ::: tip 30 | If you encounter other stuck situations, you can also call `refresh` 31 | ::: 32 | -------------------------------------------------------------------------------- /docs/zh/guide/class-hook.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebarDepth: 2 3 | --- 4 | 5 | # 类钩子 6 | 7 | **类钩子指的是特定的事件发生时 vuescroll 将会添加相应的类名** 8 | 9 | **需要 4.12.0-rc+** 10 | 11 | ## hasVBar 12 | 13 | 当垂直滚动条存在时。 14 | 15 | ## hasHBar 16 | 17 | 当水平滚动条存在时。 18 | 19 | ## vBarVisible 20 | 21 | 当垂直滚动条可见时。 22 | 23 | ## hBarVisible 24 | 25 | 当水平滚动条可见时。 26 | 27 | ## vBarDragging 28 | 29 | 当垂直滚动条被拖拽时 30 | 31 | ## hBarDragging 32 | 33 | 当水平滚动条被拖拽时 34 | 35 | ## clikingVerticalStartButton 36 | 37 | 当垂直滚动条上面的滚动按钮被点击时。 38 | 39 | ## clikingVerticalEndButton 40 | 41 | 当垂直滚动条下面的滚动按钮被点击时。 42 | 43 | ## clikingHorizontalStartButton 44 | 45 | 当水平滚动条左面的滚动按钮被点击时。 46 | 47 | ## clikingHorizontalEndButton 48 | 49 | 当垂水平动条右面的滚动按钮被点击时。 50 | 51 | ## mouseEnter 52 | 53 | 当鼠标进入到 vuescroll 时。 54 | -------------------------------------------------------------------------------- /docs/zh/guide/faq.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebarDepth: 0 3 | --- 4 | 5 | # 常见问题 6 | 7 | [[toc]] 8 | 9 | ## IOS slide 模式遇到卡顿怎么办 10 | 11 | 在`setTimeout`里调用[refresh](./api.md#refresh-refreshall)即可、 12 | 13 | ```js 14 | { 15 | handleLoadBeforeDeactivate(vm, loadDom, done) { 16 | fetchData("remoteurl").then(response => { 17 | this.data = response.data; 18 | // 注意： 19 | // 由于要先让vue渲染完新增的数据 20 | // 所以要在setTimeout里面调用refersh 21 | setTimeout(() => { 22 | this.$refs.vs.refresh(); 23 | }, 100) 24 | }); 25 | }, 26 | } 27 | ``` 28 | 29 | ::: tip 提示 30 | 如果遇到其他卡顿的情况，也可以调用`refresh` 31 | ::: 32 | 33 | ## 其他问题可以加作者微信或者进微信群交流 34 | 35 | ![](https://github.com/wangyi7099/pictureCdn/blob/master/allPic/vuescroll/wx.png?raw=true) 36 | -------------------------------------------------------------------------------- /docs/.vuepress/enhanceApp.js: -------------------------------------------------------------------------------- 1 | import { registry } from 'vuepress-theme-vuescroll'; 2 | 3 | import vuescrollCarousel from 'vuescroll-carousel'; 4 | import './assets/bar-style.css'; 5 | export default ({ Vue, router }) => { 6 | Vue.use(vuescrollCarousel); 7 | 8 | Vue.prototype.getRandomColor = function() { 9 | let str = '#'; 10 | let i = 6; 11 | while (i--) { 12 | str += Math.floor(Math.random() * 16).toString(16); 13 | } 14 | return str; 15 | }; 16 | // console.log('qqq'); 17 | let ops = { 18 | bar: { 19 | background: 'rgba(120, 120, 120, 0.4)', 20 | opacity: 0.8, 21 | size: '6px', 22 | minSize: 0.1 23 | }, 24 | rail: { 25 | size: '6px' 26 | }, 27 | scrollPanel: { 28 | scrollingX: false 29 | } 30 | }; 31 | registry(ops, 'native'); 32 | }; 33 | -------------------------------------------------------------------------------- /docs/zh/guide/optimizing-performance.md: -------------------------------------------------------------------------------- 1 | # 优化性能 2 | 3 | 可以做下列几点来优化滚动的性能，流畅度。 4 | 5 | ## 根据你的需求导入不同模式的文件 6 | 7 | 如果你只想要**自定义滚动条**, 而不需要`pull-refresh`, `push-load`等`slide`模式的特性, 你可以像这样只引入包含`native`模式特性的文件, 例如： 8 | 9 | ```javascript 10 | import vuescroll from 'vuescroll/dist/vuescroll-native'; 11 | // .... css file 12 | ``` 13 | 14 | 或者说你只想要`slide`模式的特性, 如 `pull-refresh`, `push-load` 而不想要`native`模式的特性， 你可以只引入包含`slide`模式的特性的文件。例如： 15 | 16 | ```javascript 17 | import vuescroll from 'vuescroll/dist/vuescroll-slide'; 18 | // .... css file 19 | ``` 20 | 21 | ## 手动地禁掉 `detectResize` 选项 22 | 23 | 为了检测到元素尺寸发生变化， vuescroll 向渲染过后的组件 dom 里注入了一个`object`元素， 通过监测它的`resize`事件来获取内容是否发生了变化， 你可以像这样将`detectResize` 选项设置为`false` 24 | 25 | ```javascript 26 | data() { 27 | return { 28 | ops: { 29 | vuescroll: { 30 | detectResize: false 31 | } 32 | } 33 | } 34 | } 35 | ``` 36 | 37 | 这样 vuescroll 也不会注入`object`了， 但同时也失去了**检测内容发生变化的能力**。 38 | -------------------------------------------------------------------------------- /docs/.vuepress/assets/common.styl: -------------------------------------------------------------------------------- 1 | .wrap 2 | position relative 3 | width 100% 4 | text-align center 5 | margin 1.25rem 0 6 | .wrap::after 7 | content '' 8 | display block 9 | clear both 10 | .wrap-part 11 | box-sizing border-box 12 | width 50% 13 | padding 0 0.625rem 14 | float left 15 | 16 | .operation-area 17 | text-align left 18 | .demo-title 19 | font-size 1.25rem 20 | 21 | .content-text 22 | font-size 6.25rem 23 | 24 | [id*=cnzz_stat] 25 | display none!important 26 | 27 | .demo-page 28 | .content 29 | width 100%!important; 30 | max-width:100%; 31 | padding-right 30px; 32 | padding-right 30px; 33 | box-sizing: border-box; 34 | padding 3.6rem 0 0 0; 35 | padding-bottom: 0 !important;; 36 | padding-top: 3rem !important;; 37 | max-width 100% !important; 38 | .page-edit 39 | display none; 40 | .page 41 | padding-bottom 0; 42 | 43 | 44 | @import '~vuescroll-carousel/dist/index.css'; 45 | -------------------------------------------------------------------------------- /docs/zh/donate/README.md: -------------------------------------------------------------------------------- 1 | # 捐赠 2 | 3 | > 如果您手头富裕，可以略尽绵薄之力，扫下方二维码对作者捐赠^\_^ 4 | 5 | | |
微信
|
支付宝
| 6 | | -------- | :-------------------------------------------------------------------------------------------------------------------------------: | -----------------------------------------------------------------------------------------------------------------------------: | 7 | | 图片 | | | 8 | | 捐赠名单 | | | 9 | -------------------------------------------------------------------------------- /docs/guide/class-hook.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebarDepth: 2 3 | --- 4 | 5 | # Class Hook 6 | 7 | **Class hook means vuescroll will add the corresponding class name when a particular event occurs.** 8 | 9 | **require 4.12.0-rc+** 10 | 11 | ## hasVBar 12 | 13 | When the vertical scrollbar exists. 14 | 15 | ## hasHBar 16 | 17 | When horizontal scrollbars exist. 18 | 19 | ## vBarVisible 20 | 21 | When the vertical scrollbar is visible. 22 | 23 | ## hBarVisible 24 | 25 | When the horizontal scrollbar is visible. 26 | 27 | ## vBarDragging 28 | 29 | When the vertical scrollbar is dragged 30 | 31 | ## hBarDragging 32 | 33 | When the horizontal scrollbar is dragged 34 | 35 | ## clikingVerticalStartButton 36 | 37 | When the scroll button on the vertical scrollbar is clicked. 38 | 39 | ## clikingVerticalEndButton 40 | 41 | When the scroll button under the vertical scrollbar is clicked. 42 | 43 | ## clikingHorizontalStartButton 44 | 45 | When the scroll button under the vertical scrollbar is clicked. 46 | 47 | ## clikingHorizontalEndButton 48 | 49 | When the scroll button on the right side of the vertical horizontal scrollbar is clicked. 50 | 51 | ## mouseEnter 52 | 53 | When the mouse enters vuescroll. 54 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Demo/Carousel.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 33 | 34 | -------------------------------------------------------------------------------- /docs/zh/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroImage: /logo.png 4 | actionText: 开始上手 → 5 | actionLink: /zh/guide/ 6 | features: 7 | - title: 可定制 8 | details: 完全可定制化， 你可以自定义滚动条、滚动轨道、滚动按钮等 9 | - title: 上拉-刷新和下拉-加载 10 | details: 支持上拉-刷新和下拉-加载， 并且你可以定制它们的动画效果！ 11 | - title: 平滑地滚动 12 | details: Vuescroll 支持平滑地滚动， 你可以在Vue.js上平滑的滚动滚动条！ 13 | - title: 支持轮播图 14 | details: Vuescroll 支持轮播图，无需复杂的配置，只要把内容包裹起来就能得到你自己的轮播图组件！ 15 | footer: MIT Licensed | Copyright © 2018-present Yi(Yves) Wang 16 | --- 17 | 18 | ## 一个简单的例子 19 | 20 | ```javascript 21 | import Vue from 'vue'; 22 | import vuescroll from 'vuescroll/dist/vuescroll-native'; 23 | // 导入css文件 24 | import 'vuescroll/dist/vuescroll.css'; 25 | 26 | Vue.use(vuescroll); 27 | ``` 28 | 29 | ```vue 30 | 39 | 48 | ``` 49 | 50 | ## 预览 51 | 52 | 53 | 54 | ## 微信交流群 55 | 56 |

57 | 58 |

59 | -------------------------------------------------------------------------------- /docs/.vuepress/components/IndexDemo.vue: -------------------------------------------------------------------------------- 1 | 11 | 42 | 43 | -------------------------------------------------------------------------------- /docs/guide/optimizing-performance.md: -------------------------------------------------------------------------------- 1 | # Optimizing Performance 2 | 3 | You can do the following to optimize scrolling performance and fluency. 4 | 5 | ## Import different modes file according to your needs 6 | 7 | If you only want **custom scrollbars** and don't need `pull-refreh`, `push-load` , etc. `slide` mode features, you can just `import` the files like this that only contain `native` mode features, such as: 8 | 9 | ```javascript 10 | import vuescroll from 'vuescroll/dist/vuescroll-native'; 11 | // .... css file 12 | ``` 13 | 14 | Or you just want the features of the `slide` mode, such as`pull-refreh`, and`push-load`, rather than the features of the`native` mode, you can just `import` the files only contains the`slide` mode features , such as: 15 | 16 | ```javascript 17 | import vuescroll from 'vuescroll/dist/vuescroll-slide'; 18 | // .... css file 19 | ``` 20 | 21 | ## Manually disable `detectResize` options 22 | 23 | To detect changes in element sizes, vuescroll injects an `object` element into the rendered component DOM to detect changes in content by listening its`resize` event, and you can set the`detectResize` option to `false` like this 24 | 25 | ```javascript 26 | data() { 27 | return { 28 | ops: { 29 | vuescroll: { 30 | detectResize: false 31 | } 32 | } 33 | } 34 | } 35 | ``` 36 | 37 | This way vuescroll won't inject `object`, but it also loses the ability to detect changes in content. 38 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroImage: /logo.png 4 | actionText: Get Started → 5 | actionLink: /guide/ 6 | features: 7 | - title: Customizable 8 | details: Full customizable, you can customizable scrollbar, rail, scroll button and so on 9 | - title: Pull-to-refresh and push-to-load 10 | details: Support pull-to-refresh and push-to-load and you can also customize their animations. 11 | - title: Smooth-scroll 12 | details: Vuescroll supports smooth-scroll, you can scroll smoothly on Vue.js! 13 | - title: Carousel supported 14 | details: Vuescroll supports carousel, no complex option, just wrap the content and you can have your own carousel component! 15 | 16 | footer: MIT Licensed | Copyright © 2018-present Yi(Yves) Wang 17 | --- 18 | 19 | ## A simple example 20 | 21 | ```javascript 22 | import Vue from "vue"; 23 | import vuescroll from "vuescroll/dist/vuescroll-native"; 24 | // import the css file 25 | import "vuescroll/dist/vuescroll.css"; 26 | 27 | Vue.use(vuescroll); 28 | ``` 29 | 30 | ```vue 31 | 40 | 49 | ``` 50 | 51 | ## Preview 52 | 53 | 54 | -------------------------------------------------------------------------------- /docs/zh/guide/typescript.md: -------------------------------------------------------------------------------- 1 | # Typescript 2 | 3 | ## 介绍 4 | 5 | Vuescroll 在 `4.6.11` 版本中新增了对`typescript`的支持， 你可以借助`typscript`的类型推导功能来快捷输入 Vuescroll 的 Api。 6 | 7 | ## 用法 8 | 9 | 1. 安装 Vuescroll. 10 | 11 | 2. 在你使用到 Vuescroll 的单文件组件里面 `import` Vuescroll, 如下所示： 12 | 13 | ```vue 14 | 21 | 22 | 35 | ``` 36 | 37 | 3. 推导`Config` 38 | 39 | ```vue 40 | 47 | 48 | 66 | ``` 67 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Demo/DemoIdicator.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 23 | 24 | 77 | -------------------------------------------------------------------------------- /docs/guide/typescript.md: -------------------------------------------------------------------------------- 1 | # Typescript 2 | 3 | ## Introduction 4 | 5 | Vuescrol has added support for `typescript` in the `4.6.11` version. You can quickly input the Api of Vuescroll with the help of the `typscript` type inference. 6 | 7 | ## Usage 8 | 9 | 1. Install Vuescroll. 10 | 11 | 2. `import` Vuescroll in the single file component where you use Vuescroll, like so: 12 | 13 | ```vue 14 | 21 | 22 | 35 | ``` 36 | 37 | 3. Inference of `Config` 38 | 39 | ```vue 40 | 47 | 48 | 66 | ``` 67 | -------------------------------------------------------------------------------- /docs/zh/guide/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebarDepth: 1 3 | --- 4 | 5 | # 介绍 6 | 7 |

8 | 9 |

10 | 11 | ## 什么是 vuescroll 12 | 13 | vuescroll 是一款基于 Vue.js 自定义滚动条的插件，它有两种模式: 14 | 15 | - native: 适用于 PC 端， 支持基本的自定义滚动条。 16 | 17 | - slide: 适用于移动端， 支持下拉-加载，上拉刷新，轮播等。 18 | 19 | 但是，这并不意味着 slide 模式只能用于移动端，只是因为移动端与 slide 模式更加契合而已。 20 | 21 | ## 为什么我创造了 vuescroll 22 | 23 | - 首先，我觉得其他自定义功能条功能插件功能太简陋了，有的甚至还没有`横向滚动条`。 24 | 25 | - 其次，我觉得其他滚动条功能太单一了，比如只有`slide`的功能，如`iscroll`。 我想做一个功能全面一些的滚动条插件。即既包含自定义滚动条，又拥有上拉-加载，下拉-刷新， 检测内容变化， 平滑滚动等功能的滚动条插件。 26 | 27 | ## 特点 28 | 29 | ### 基本特点 30 | 31 | - 能够[自定义滚动条样式](https://vuescrolljs.yvescoding.org/zh/demo/#%E5%AE%8C%E5%85%A8%E5%8F%AF%E5%AE%9A%E5%88%B6)。 32 | 33 | - 能够[支持上拉-刷新，下拉-加载](https://vuescrolljs.yvescoding.org/zh/demo/#%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0%E5%92%8C%E4%B8%8A%E6%8E%A8%E5%8A%A0%E8%BD%BD)。 34 | 35 | - 支持[轮播图](https://vuescrolljs.yvescoding.org/zh/demo/#%E8%BD%AE%E6%92%AD%E5%9B%BE)。 36 | 37 | ### 其他特点 38 | 39 | - 支持[平滑地滚动，并且可以设置不同的滚动动画](https://vuescrolljs.yvescoding.org/zh/guide/configuration.html#scrollpanel)。 40 | 41 | - 支持[检测内容大小发生变化并反馈给用户](https://vuescrolljs.yvescoding.org/zh/guide/configuration.html#vuescroll)。 42 | 43 | - 支持 [typescript](https://vuescrolljs.yvescoding.org/zh/guide/typescript.html#typescript)，[SSR(服务端渲染)](https://vuescrolljs.yvescoding.org/zh/demo/#ssr-%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93-demo)。 44 | 45 | - 由于是 Vue 插件，对 Vue 用户十分友好。 46 | 47 | - 丰富的 [Api](https://vuescrolljs.yvescoding.org/zh/guide/api.html#%E9%80%9A%E7%94%A8-api)，[事件](https://vuescrolljs.yvescoding.org/zh/guide/event.html#%E4%BA%8B%E4%BB%B6)帮助你完成各种复杂的功能。 48 | 49 | * 还有更多... 50 | 51 | ## 我还会创造什么？ 52 | 53 | - [magic-scroll](https://github.com/YvesCoding/magic-scroll) 跟 vuescroll 功能相仿，但是是基于`React`的自定义滚动条插件. 54 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Slot/svg-animate1.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 29 | 30 | 48 | -------------------------------------------------------------------------------- /docs/demo/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar: false 3 | pageClass: demo-page 4 | editLink: false 5 | --- 6 | 7 | 8 | 59 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Slot/svg-animate3.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 27 | 28 | 49 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Slot/svg-animate5.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 31 | 32 | 51 | -------------------------------------------------------------------------------- /docs/guide/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebarDepth: 1 3 | --- 4 | 5 | # Introduction 6 | 7 |

8 | 9 |

10 | 11 | ## What is vuescroll 12 | 13 | Vuescroll is a customizable scrollbar plugin based on Vue.js. It has two modes: 14 | 15 | - Native: For PC , it supports basic custom scrollbars. 16 | 17 | * Slide: Suitable for mobile terminal, supporting push-to-load, pull-to-refresh, carousel, etc. 18 | 19 | However, this doesn't mean that the slide mode can only be used on the mobile side, just because the mobile side is more compatible with the slide mode. 20 | 21 | ## Why I created vuescroll 22 | 23 | - Firstly, I think other scrollbar plugins' abilities are too simple, some others even don't support `horizontal scrolling`. 24 | 25 | - Secondly, I think other scrollbar plugins's functions are too unitary, like `iscroll`, I want to make a more comprehensive scrollbar plugin. That is to say, a scrollbar plugin that not only supports customizing scrollbar, but also has abilities to push-to-load and pull-to-refresh, detect size changes of content, smooth-scroll etc. 26 | 27 | ## Feature 28 | 29 | ### Base Features 30 | 31 | - Has abilities to [customize scrollbar](https://vuescrolljs.yvescoding.org/demo/#customize-scrollbar). 32 | 33 | - Has abilities to [pull to refresh, push to load](https://vuescrolljs.yvescoding.org/demo/#pull-refresh-or-push-load). 34 | 35 | - Support [carousel](https://vuescrolljs.yvescoding.org/demo/#carousel). 36 | 37 | ### Other Features 38 | 39 | - Support [scrolling smoothly, and you can set different scrolling animations](https://vuescrolljs.yvescoding.org/guide/configuration.html#scrollpanel). 40 | 41 | - Support [detection size changes of content and react to the users](https://vuescrolljs.yvescoding.org/guide/configuration.html#vuescroll). 42 | 43 | - Support [typescript](https://vuescrolljs.yvescoding.org/guide/typescript.html#introduction), [SSR(Server-side-rendering)](https://vuescrolljs.yvescoding.org/demo/#ssr-server-side-rendering-demo). 44 | 45 | - Because it is a Vue plugin, it's more friendly to Vue users. 46 | 47 | - Restfull [Api](https://vuescrolljs.yvescoding.org/guide/api.html) and [events](https://vuescrolljs.yvescoding.org/guide/event.html) help you achieve all kinds of complex functions. 48 | 49 | - And more... 50 | 51 | ## What else am I creating ? 52 | 53 | - [magic-scroll](https://github.com/YvesCoding/magic-scroll) has the similar functions with vuescroll, but it's a customize scrollbar based on `React`. 54 | -------------------------------------------------------------------------------- /docs/zh/guide/slot.md: -------------------------------------------------------------------------------- 1 | # Slot 2 | 3 | ## 下拉刷新/上推加载动画 4 | 5 | 在 mode 为`slide`的情况下并且 pull-refresh/push-load 启用的情况下，可以给 Vuescroll 传入不同的 slot 来当作 pull-refresh/push-load 的不同阶段的提示。**请确保你 slot 的 dom 的 position 是 absolute，所有可能会引起一些 bug。。。** 6 | 7 | ### 刷新 8 | 9 | | slot 名称 | 对应显示阶段 | 描述 | 10 | | ---------------------- | -------------- | --------------------------------- | 11 | | refresh-deactive | deactive | deactive 阶段显示的提示 dom | 12 | | refresh-beforeDeactive | beforeDeactive | beforeDeactive 阶段显示的提示 dom | 13 | | refresh-start | start | start 阶段显示的提示 dom | 14 | | refresh-active | active | active 阶段显示的提示 dom | 15 | 16 | #### 用法 17 | 18 | ```vue 19 |
20 | 21 | 22 |
23 |
24 |
25 | 26 |
27 | ``` 28 | 29 | ### 加载 30 | 31 | | slot 名称 | 对应显示阶段 | 描述 | 32 | | ------------------- | -------------- | --------------------------------- | 33 | | load-deactive | deactive | deactive 阶段显示的提示 dom | 34 | | load-beforeDeactive | beforeDeactive | beforeDeactive 阶段显示的提示 dom | 35 | | load-start | start | start 阶段显示的提示 dom | 36 | | load-active | active | active 阶段显示的提示 dom | 37 | 38 | #### 用法 39 | 40 | ```vue 41 |
42 | 43 | 44 |
45 |
46 |
47 | 48 |
49 | ``` 50 | 51 | 52 | 53 | [源码](https://github.com/YvesCoding/vuescrolljs/blob/master/docs/.vuepress/components/Slot/PullRefresh.vue). 54 | 55 | ## 自定义 Container/Panel/Content 56 | 57 | ### 用法 58 | 59 | ```vue 60 | 73 | 79 | ``` 80 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Slot/svg-animate2.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 42 | 43 | 62 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Slot/svg-animate4.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 35 | 36 | 55 | -------------------------------------------------------------------------------- /docs/guide/slot.md: -------------------------------------------------------------------------------- 1 | # Slot 2 | 3 | ## Animations of pull-refresh/push-load 4 | 5 | In the case of mode for `slide` and when pull-refresh/push-load is enabled, a different slot can be sent to Vuescroll as a hint for different stages of pull-refresh/push-load.**Make sure thatthe position of your slot DOM is absolute, or may cause some bugs.** 6 | 7 | ### Refresh 8 | 9 | | slot name | Corresponding stage | Description | 10 | | ---------------------- | ------------------- | ------------------------------------------------- | 11 | | refresh-deactive | deactive | The hint of the deactive stage display DOM | 12 | | refresh-beforeDeactive | beforeDeactive | The hint of the before deactive stage display DOM | 13 | | refresh-start | start | The hint of the start stage display DOM | 14 | | refresh-active | active | The hint of the active stage display DOM | 15 | 16 | #### Usage 17 | 18 | ```vue 19 |
20 | 21 | 22 |
23 |
24 |
25 | 26 |
27 | ``` 28 | 29 | ### Load 30 | 31 | | slot name | Corresponding stage | Description | 32 | | ------------------- | ------------------- | ------------------------------------------------- | 33 | | load-deactive | deactive | The hint of the deactive stage display DOM | 34 | | load-beforeDeactive | beforeDeactive | The hint of the before deactive stage display DOM | 35 | | load-start | start | The hint of the start stage display DOM | 36 | | load-active | active | The hint of the active stage display DOM | 37 | 38 | #### Usage 39 | 40 | ```vue 41 |
42 | 43 | 44 |
45 |
46 |
47 | 48 |
49 | ``` 50 | 51 | 52 | 53 | [source code](https://github.com/YvesCoding/vuescrolljs/blob/master/docs/.vuepress/components/Slot/PullRefresh.vue). 54 | 55 | ## Customize Container/Panel/Content 56 | 57 | ### Usage 58 | 59 | ```vue 60 | 76 | 82 | ``` 83 | -------------------------------------------------------------------------------- /docs/zh/guide/getting-started.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebarDepth: 1 3 | --- 4 | 5 | # 开始上手 6 | 7 | :::warning 提示 8 | 自从`4.10.1`版本以后， 你无需再引入 `vuescroll/dist/vuescroll.css` 文件了。 9 | ::: 10 | 11 | ## 安装 12 | 13 | ### Vue 兼容性表格 14 | 15 | | vue 版本 | vuescroll 版本 | 16 | | -------- | -------------- | 17 | | 2.x | <=4.17.4 | 18 | | 3.x | >=5.0.0 | 19 | 20 | ### 模块系统 21 | 22 | #### 安装 23 | 24 | ```bash 25 | npm i -S 26 | # 或者通过yarn 27 | yarn add vuescroll 28 | # 或者通过cnpm 29 | cnpm i -S 30 | ``` 31 | 32 | #### 引入 33 | 34 | 1. 全局引入 35 | 36 | ##### 对于 vue 2.x 版本 37 | 38 | 在你的入口文件: 39 | 40 | ```javascript 41 | import Vue from "vue"; 42 | import vuescroll from "vuescroll"; 43 | 44 | // 你可以在这里设置全局配置. 45 | Vue.use(vuescroll, { 46 | ops: { 47 | // 设置默认的全局配置 48 | }, 49 | name: "myScroll" // 自定义组件名称， 默认是vueScroll 50 | }); 51 | 52 | /** 53 | * 或者 54 | */ 55 | Vue.prototype.$vuescrollConfig = { 56 | bar: { 57 | background: "#000" 58 | } 59 | }; 60 | ``` 61 | 62 | ##### 对于 vue 3.x 版本 63 | 64 | 在你的入口文件: 65 | 66 | ```javascript 67 | import { createApp } from "vue"; 68 | import vuescroll from "vuescroll"; 69 | 70 | const app = createApp(App); 71 | 72 | // 你可以在这里设置全局配置 73 | app.use(vuescroll, { 74 | ops: { 75 | // 设置默认的全局配置 76 | }, 77 | name: "myScroll" // 自定义组件名称， 默认是vueScroll 78 | }); 79 | ``` 80 | 81 | 2. 局部引入 82 | 83 | ```html 84 | 87 | 96 | ``` 97 | 98 | #### 只引入需要的模式 99 | 100 | **只引入 slide 模式的特性：** 101 | 102 | ```javascript 103 | import Vue from "vue"; 104 | import vuescroll from "vuescroll/dist/vuescroll-slide"; 105 | 106 | Vue.use(vuescroll); 107 | ``` 108 | 109 | **只引入 native 模式的特性：** 110 | 111 | ```javascript 112 | import Vue from "vue"; 113 | import vuescroll from "vuescroll/dist/vuescroll-native"; 114 | 115 | Vue.use(vuescroll); 116 | ``` 117 | 118 | ### 浏览器环境 119 | 120 | **直接通过 CDN 方式引入** 121 | 122 | ```html 123 | 124 | 125 | 126 | 127 | 128 | 129 | ``` 130 | 131 | ## 用法 132 | 133 | > 把 vuescroll 放在`parent-dom`里面，`child-dom`外面即可。 就是这么简单。 134 | 135 | ::: warning 警告 136 | 如果你看不到滚动条， 请打开`dev-tool`是否你的子元素尺寸超过了你的父元素尺寸。 出现滚动条的条件与原生滚动条的相同， 即： **子元素的尺寸超出了父元素**。 137 | ::: 138 | 139 | ```html 140 | 146 | 160 | ``` 161 | 162 | ::: tip 提示 163 | 如果你有紧急情况， 可以调用 `refresh` 函数。 164 | ::: 165 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Api/ScrollTo.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 83 | 84 | 138 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Slot/PullRefresh.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 85 | 86 | 145 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Api/GetCurrentviewDom.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 78 | 79 | 137 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Api/ScrollBy.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 82 | 83 | 137 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Guide/Rail.vue: -------------------------------------------------------------------------------- 1 | 46 | 47 | 98 | 99 | 154 | -------------------------------------------------------------------------------- /docs/guide/getting-started.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebarDepth: 1 3 | --- 4 | 5 | # Getting Started 6 | 7 | :::warning 8 | Since `4.10.1`, you don't need to import `vuescroll/dist/vuescroll.css` any more, 9 | ::: 10 | 11 | ## Installation 12 | 13 | ### Vue Compatibility Table 14 | 15 | | vue version | vuescroll version | 16 | | ----------- | ----------------- | 17 | | 2.x | <=4.17.4 | 18 | | 3.x | >=5.0.0 | 19 | 20 | ### Module System 21 | 22 | #### Installation 23 | 24 | ```bash 25 | npm i vuescroll -S 26 | # or use yarn 27 | # yarn add vuescroll 28 | ``` 29 | 30 | #### Import 31 | 32 | 1. import globally 33 | 34 | ##### For vue 2.x 35 | 36 | In your entry file: 37 | 38 | ```javascript 39 | import Vue from "vue"; 40 | import vuescroll from "vuescroll"; 41 | 42 | // You can set global config here. 43 | Vue.use(vuescroll, { 44 | ops: { 45 | // The global config 46 | }, 47 | name: "myScroll" // customize component name, default -> vueScroll 48 | }); 49 | 50 | /** 51 | * or 52 | */ 53 | Vue.prototype.$vuescrollConfig = { 54 | bar: { 55 | background: "#000" 56 | } 57 | }; 58 | ``` 59 | 60 | ##### For vue 3.x 61 | 62 | In your entry file: 63 | 64 | ```javascript 65 | import { createApp } from "vue"; 66 | import vuescroll from "vuescroll"; 67 | 68 | const app = createApp(App); 69 | 70 | // You can set global config here. 71 | app.use(vuescroll, { 72 | ops: { 73 | // The global config 74 | }, 75 | name: "myScroll" // customize component name, default -> vueScroll 76 | }); 77 | ``` 78 | 79 | 2. import locally 80 | 81 | ```html 82 | 85 | 94 | ``` 95 | 96 | #### Only import the mode you need. 97 | 98 | **Only import the features of slide mode:** 99 | 100 | ```javascript 101 | import Vue from "vue"; 102 | import vuescroll from "vuescroll/dist/vuescroll-slide"; 103 | 104 | Vue.use(vuescroll); 105 | ``` 106 | 107 | **Only import the features of native mode:** 108 | 109 | ```javascript 110 | import Vue from "vue"; 111 | import vuescroll from "vuescroll/dist/vuescroll-native"; 112 | 113 | Vue.use(vuescroll); 114 | ``` 115 | 116 | ### Browser Environment 117 | 118 | #### Direct import via CDN 119 | 120 | ```html 121 | 122 | 123 | 124 | 125 | 126 | 127 | ``` 128 | 129 | ## Usage 130 | 131 | > Put it outside the `child element`, inside the `parent element`. Just so easy. 132 | 133 | ::: warning 134 | If you don't see scrollbar showing up, please open `dev-tool` to checkout whether your child's size is greater than parent's. The condition for the scrollbar to appear is the same as the native scrollbar, that is, **the size of the child element exceeds the parent element**. 135 | 136 | ::: 137 | 138 | ```html 139 | 145 | 159 | ``` 160 | 161 | ::: tip 162 | If you have an emergency, you can call the `refresh` function. 163 | ::: 164 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Guide/ScrollButton.vue: -------------------------------------------------------------------------------- 1 | 48 | 49 | 98 | 99 | 154 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Guide/Bar.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | 107 | 108 | 163 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Api/ScrollIntoView.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 90 | 91 | 149 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Guide/BaseConfig.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 87 | 88 | 135 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Api/Stop.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 113 | 114 | 168 | -------------------------------------------------------------------------------- /docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | function resolve(dirname) { 4 | return path.resolve(__dirname, dirname); 5 | } 6 | 7 | // const isPro = process.env.NODE_ENV == 'production'; 8 | 9 | module.exports = { 10 | base: "/", 11 | host: "127.0.0.1", 12 | port: "3000", 13 | serviceWorker: true, 14 | theme: "vuescroll", 15 | locales: { 16 | "/": { 17 | lang: "en-US", 18 | title: "Vuescroll.js", 19 | description: 20 | "Vuescroll - A customizable scrollbar plugin based on vue.js for PC and mobile phone", 21 | }, 22 | "/zh/": { 23 | lang: "zh-CN", 24 | title: "Vuescroll.js", 25 | description: "Vuescroll - 一个自定义滚动条的插件适用于PC和移动端", 26 | }, 27 | }, 28 | head: [ 29 | ["link", { rel: "icon", href: `/logo.png` }], 30 | ["link", { rel: "manifest", href: "/manifest.json" }], 31 | ["meta", { name: "baidu-site-verification", content: "code-E1gngvNSCZ" }], 32 | ], 33 | themeConfig: { 34 | repo: "YvesCoding/vuescroll", 35 | docsRepo: "YvesCoding/vuescrolljs", 36 | editLinks: true, 37 | docsDir: "docs", 38 | docsBranch: "master", 39 | sidebarDepth: 3, 40 | locales: { 41 | "/": { 42 | label: "English", 43 | selectText: "Languages", 44 | editLinkText: "Edit this page on GitHub", 45 | lastUpdated: "Last Updated", // string | boolean 46 | nav: [ 47 | { 48 | text: "Guide", 49 | link: "/guide/", 50 | }, 51 | { 52 | text: "Demo", 53 | link: "/demo/", 54 | }, 55 | { 56 | text: "My opensources", 57 | items: [ 58 | { 59 | text: "Rcpress", 60 | link: "https://github.com/YvesCoding/rcpress", 61 | }, 62 | { 63 | text: "magic-scroll", 64 | link: "https://github.com/YvesCoding/magic-scroll", 65 | }, 66 | ], 67 | }, 68 | ], 69 | sidebar: { 70 | "/guide/": genSidebarConfig("Guide"), 71 | "/demo/": genDemo("Demo"), 72 | }, 73 | serviceWorker: { 74 | updatePopup: { 75 | message: "New content is available.", 76 | buttonText: "Refresh", 77 | }, 78 | }, 79 | }, 80 | "/zh/": { 81 | label: "简体中文", 82 | selectText: "选择语言", 83 | editLinkText: "在 GitHub 上编辑此页", 84 | lastUpdated: "上次更新", // string | boolean 85 | nav: [ 86 | { 87 | text: "指南", 88 | link: "/zh/guide/", 89 | }, 90 | { 91 | text: "Demo", 92 | link: "/zh/demo/", 93 | }, 94 | { 95 | text: "我的开源项目", 96 | items: [ 97 | { 98 | text: "Rcpress", 99 | link: "https://github.com/YvesCoding/rcpress", 100 | }, 101 | { 102 | text: "magic-scroll", 103 | link: "https://github.com/YvesCoding/magic-scroll", 104 | }, 105 | ], 106 | }, 107 | ], 108 | sidebar: { 109 | "/zh/guide/": genSidebarConfig("指南"), 110 | "/zh/demo/": genDemo("Demo"), 111 | "/zh/donate/": [ 112 | { 113 | title: "捐赠", 114 | collapsable: false, 115 | children: [""], 116 | }, 117 | ], 118 | }, 119 | serviceWorker: { 120 | updatePopup: { 121 | message: "发现新内容可用", 122 | buttonText: "刷新", 123 | }, 124 | }, 125 | }, 126 | }, 127 | }, 128 | configureWebpack: (config, isServer) => { 129 | let base = { 130 | resolve: { 131 | alias: { 132 | assets: resolve("./assets"), 133 | }, 134 | }, 135 | }; 136 | return base; 137 | }, 138 | }; 139 | 140 | function genSidebarConfig(title) { 141 | return [ 142 | { 143 | title, 144 | collapsable: false, 145 | children: [ 146 | "", 147 | "getting-started", 148 | "configuration", 149 | "event", 150 | "api", 151 | "slot", 152 | "class-hook", 153 | "typescript", 154 | "optimizing-performance", 155 | "faq", 156 | ], 157 | }, 158 | ]; 159 | } 160 | 161 | function genDemo(title) { 162 | return [ 163 | { 164 | title, 165 | collapsable: false, 166 | children: [""], 167 | }, 168 | ]; 169 | } 170 | -------------------------------------------------------------------------------- /docs/zh/guide/api.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebarDepth: 3 3 | --- 4 | 5 | # Api 6 | 7 | ## 通用 Api 8 | 9 | 10 | 11 | ### scrollTo(position[,speed ][, easing]) 12 | 13 | #### 参数 14 | 15 | - `position (Object)` 16 | 17 | - `x (string | number)` 18 | - `y (string | number)` 19 | 20 | - `speed (number)` 21 | - `easing (string)` 22 | 23 | #### 介绍 24 | 25 | 滚动到某一个位置，可以只指定`x` 或 `y`。 `easing`参数可以参考[easing](configuration.html#easing) 26 | 27 | #### 例子 28 | 29 | ```javascript 30 | this.$refs["vs"].scrollTo( 31 | { 32 | x: "50%" 33 | }, 34 | 500 35 | ); 36 | 37 | this.$refs["vs"].scrollTo( 38 | { 39 | y: 200 40 | }, 41 | 500, 42 | "easeInQuad" 43 | ); 44 | ``` 45 | 46 | #### 尝试一下 47 | 48 | 49 | 50 | ### scrollBy(position[,speed ][, easing]) 51 | 52 | #### 参数 53 | 54 | - `position (Object)` 55 | 56 | - `dx (string | number)` 57 | - `dy (string | number)` 58 | 59 | - `speed (number)` 60 | - `easing (string)` 61 | 62 | #### 介绍 63 | 64 | 以当前位置为起点，滚动一段距离，`dx` 或 `dy`。 `easing`参数可以参考[easing](configuration.html#easing) 65 | 66 | #### 例子 67 | 68 | ```javascript 69 | this.$refs["vs"].scrollBy( 70 | { 71 | dx: "50%" 72 | }, 73 | 500 74 | ); 75 | 76 | this.$refs["vs"].scrollBy( 77 | { 78 | dy: -200 79 | }, 80 | 500, 81 | "easeInQuad" 82 | ); 83 | ``` 84 | 85 | #### 尝试一下 86 | 87 | 88 | 89 | ### getCurrentviewDom() 90 | 91 | #### 介绍 92 | 93 | 获取你能看到的 vuescroll 的**直接子元素**. 94 | 95 | #### 例子 96 | 97 | ```javascript 98 | this.$refs["vs"].getCurrentviewDom(); 99 | ``` 100 | 101 | #### H 尝试一下 102 | 103 | 104 | 105 | ### scrollIntoView(selector[ , speed]) 106 | 107 | #### 参数 108 | 109 | - `selector (string)` 110 | 111 | - `speed (number)` 112 | 113 | #### 介绍 114 | 115 | 当前窗口滚动至`vuescroll`的一个**直接子元素**。 116 | 117 | #### 例子 118 | 119 | ```html 120 | 121 |
122 |
123 |
124 | 125 | ``` 126 | 127 | ```javascript 128 | this.$refs["vs"].scrollIntoView("#d3", 500); 129 | ``` 130 | 131 | #### H 尝试一下 132 | 133 | 134 | 135 | ### refresh()/refreshAll() 136 | 137 | #### 介绍 138 | 139 | 刷新制定 vuescroll 的状态或者所有 vuescroll 的状态。 140 | 141 | ::: tip 提示 142 | 在你的 vuescroll 的滚动条不出现的时候可以用到。 143 | ::: 144 | 145 | #### 用法 146 | 147 | ```html 148 | 149 |
150 | 151 | 152 |
153 | 154 | ``` 155 | 156 | ```javascript 157 | // 如果你是模块系统的话，如果在浏览器直接使用vuescroll即可。 158 | import vuescroll from "vuescroll"; 159 | 160 | this.$refs["vs"].refresh(); 161 | 162 | vuescroll.refreshAll(); 163 | ``` 164 | 165 | ### getScrollProcess 166 | 167 | #### 简介 168 | 169 | 获取当前的滚动进程，范围是[0,1] 170 | 171 | #### 用法 172 | 173 | ```html 174 | 175 |
176 | 177 | ``` 178 | 179 | ```javascript 180 | const { v, h } = this.$refs["vs"].getScrollProcess(); 181 | 182 | console.log(v, h); 183 | ``` 184 | 185 | ### getPosition 186 | 187 | #### 简介 188 | 189 | 获取当前的滚动条的 scrollTop.scrollLeft 190 | 191 | #### 用法 192 | 193 | ```html 194 | 195 |
196 | 197 | ``` 198 | 199 | ```javascript 200 | const { scrollTop, scrollLeft } = this.$refs["vs"].getPosition(); 201 | 202 | console.log(scrollTop, scrollLeft); 203 | ``` 204 | 205 | ## Native 模式的 Api 206 | 207 | ### stop()/pause()/continue() 208 | 209 | #### 介绍 210 | 211 | 立刻停止/暂停/继续滚动 212 | 213 | #### 例子 214 | 215 | ```javascript 216 | this.$refs["vs"].stop(); 217 | this.$refs["vs"].pause(); 218 | this.$refs["vs"].continue(); 219 | ``` 220 | 221 | #### 尝试一下 222 | 223 | 224 | 225 | ## Slide 模式的 Api 226 | 227 | ### goToPage(page[, animate]) 228 | 229 | #### 参数 230 | 231 | - `page (Object)` 232 | 233 | - `x (number)` 234 | - `y (number)` 235 | 236 | - `animate (boolean)` 237 | 238 | #### 例子 239 | 240 | ```javascript 241 | this.$refs["vs"].goToPage( 242 | { 243 | x: 1, 244 | y: 2 245 | }, 246 | true 247 | ); 248 | ``` 249 | 250 | ### getCurrentPage（） 251 | 252 | #### 介绍 253 | 254 | 获取当前的页码。只在`slide模式` 和 `paging` 启动下工作。 255 | 256 | #### 例子 257 | 258 | ```javascript 259 | const pageInfo = this.$refs["vs"].getCurrentPage(); 260 | console.log(pageInfo); 261 | ``` 262 | 263 | ### triggerRefreshOrLoad(type) 264 | 265 | ### 参数 266 | 267 | - `type ('refresh' | 'load')` 268 | 269 | #### 介绍 270 | 271 | 直接触发刷新或者加载 272 | 273 | #### 用法 274 | 275 | ```javascript 276 | this.$refs["vs"].triggerRefreshOrLoad("load"); 277 | ``` 278 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Guide/ScrollPanel.vue: -------------------------------------------------------------------------------- 1 | 78 | 79 | 145 | 146 | 200 | -------------------------------------------------------------------------------- /docs/guide/api.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebarDepth: 2 3 | --- 4 | 5 | # Api 6 | 7 | ## Common apis 8 | 9 | ### scrollTo(position[,speed ][, easing]) 10 | 11 | #### Arguments 12 | 13 | - `position (Object)` 14 | 15 | - `x (string | number)` 16 | - `y (string | number)` 17 | 18 | - `speed (number)` 19 | - `easing (string)` 20 | 21 | #### Introduction 22 | 23 | To scroll to a certain location, you can specify only `x` or`y`. `easing`parameter can be referred to [easing](configuration.html#easing) 24 | 25 | #### Example 26 | 27 | ```javascript 28 | this.$refs["vs"].scrollTo( 29 | { 30 | x: "50%" 31 | }, 32 | 500 33 | ); 34 | 35 | this.$refs["vs"].scrollTo( 36 | { 37 | y: 200 38 | }, 39 | 500, 40 | "easeInQuad" 41 | ); 42 | ``` 43 | 44 | ##### Have a try 45 | 46 | 47 | 48 | ### scrollBy(position[,speed ][, easing]) 49 | 50 | #### Arguments 51 | 52 | - `position (Object)` 53 | 54 | - `dx (string | number)` 55 | - `dy (string | number)` 56 | 57 | - `speed (number)` 58 | - `easing (string)` 59 | 60 | #### Introduction 61 | 62 | Take the current position as the starting point, scroll for a distance, `dx` or `dy`. `easing`parameter can be referred to [easing](configuration.html#easing) 63 | 64 | #### Example 65 | 66 | ```javascript 67 | this.$refs["vs"].scrollBy( 68 | { 69 | dx: "50%" 70 | }, 71 | 500 72 | ); 73 | 74 | this.$refs["vs"].scrollBy( 75 | { 76 | dy: -200 77 | }, 78 | 500, 79 | "easeInQuad" 80 | ); 81 | ``` 82 | 83 | #### Have a try 84 | 85 | 86 | 87 | ### getCurrentviewDom() 88 | 89 | #### Introduction 90 | 91 | Get the **direct subelement** of vuescroll as you can see. 92 | 93 | #### Example 94 | 95 | ```javascript 96 | this.$refs["vs"].getCurrentviewDom(); 97 | ``` 98 | 99 | #### Have a try 100 | 101 | 102 | 103 | ### scrollIntoView(selector[ , speed]) 104 | 105 | #### Arguments 106 | 107 | - `selector (string)` 108 | 109 | - `speed (number)` 110 | 111 | #### Introduction 112 | 113 | The current window scrolls to a **direct child element** of `vuescroll`. 114 | 115 | #### Example 116 | 117 | ```html 118 | 119 |
120 |
121 |
122 | 123 | ``` 124 | 125 | ```javascript 126 | this.$refs["vs"].scrollIntoView("#d3", 500); 127 | ``` 128 | 129 | #### Have a try 130 | 131 | 132 | 133 | ### refresh()/refreshAll() 134 | 135 | #### Introduction 136 | 137 | Refresh the state of the specified vuescroll or all vuescrolls. 138 | 139 | ::: tip 140 | It can be used when the scroll bar of your vuescroll does not appear. 141 | You had better call it in setTimeout after mutating the data. 142 | ::: 143 | 144 | #### Usage 145 | 146 | ```html 147 | 148 |
149 | 150 | 151 |
152 | 153 | ``` 154 | 155 | ```javascript 156 | // If you are a modular system, you can use vuescroll directly in the browser. 157 | 158 | import vuescroll from "vuescroll"; 159 | 160 | this.$refs["vs"].refresh(); 161 | 162 | vuescroll.refreshAll(); 163 | ``` 164 | 165 | ### getScrollProcess 166 | 167 | #### Introduction 168 | 169 | Get the current scroll process under a range of [0, 1]. 170 | 171 | #### Usage 172 | 173 | ```html 174 | 175 |
176 | 177 | ``` 178 | 179 | ```javascript 180 | const { v, h } = this.$refs["vs"].getScrollProcess(); 181 | 182 | console.log(v, h); 183 | ``` 184 | 185 | ### getPosition 186 | 187 | #### Introduction 188 | 189 | Get the `scrollTop.scrollLeft` of current scrolling. 190 | 191 | #### Usage 192 | 193 | ```html 194 | 195 |
196 | 197 | ``` 198 | 199 | ```javascript 200 | const { scrollTop, scrollLeft } = this.$refs["vs"].getPosition(); 201 | 202 | console.log(scrollTop, scrollLeft); 203 | ``` 204 | 205 | ## Api for native mode 206 | 207 | ### stop()/pause()/continue() 208 | 209 | #### Introduction 210 | 211 | Stop / pause / continue scrolling at once. 212 | 213 | #### Example 214 | 215 | ```javascript 216 | this.$refs["vs"].stop(); 217 | this.$refs["vs"].pause(); 218 | this.$refs["vs"].continue(); 219 | ``` 220 | 221 | #### Have a try 222 | 223 | 224 | 225 | ## Api for slide mode 226 | 227 | ### goToPage(page[, animate]) 228 | 229 | #### Arguments 230 | 231 | - `page (Object)` 232 | 233 | - `x (number)` 234 | - `y (number)` 235 | 236 | - `animate (boolean)` 237 | 238 | #### Example 239 | 240 | ```javascript 241 | this.$refs["vs"].goToPage( 242 | { 243 | x: 1, 244 | y: 2 245 | }, 246 | true 247 | ); 248 | ``` 249 | 250 | ### getCurrentPage（） 251 | 252 | #### Introduction 253 | 254 | Get the current page number. Work only under `slide mode`and `paging` boot. 255 | 256 | #### Example 257 | 258 | ```javascript 259 | const pageInfo = this.$refs["vs"].getCurrentPage(); 260 | console.log(pageInfo); 261 | ``` 262 | 263 | ### triggerRefreshOrLoad(type) 264 | 265 | ### Arguments 266 | 267 | - `type ('refresh' | 'load')` 268 | 269 | #### Introduction 270 | 271 | Directly trigger refresh or load. 272 | 273 | #### Example 274 | 275 | ```javascript 276 | this.$refs["vs"].triggerRefreshOrLoad("load"); 277 | ``` 278 | -------------------------------------------------------------------------------- /docs/zh/guide/event.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebarDepth: 2 3 | --- 4 | 5 | # 事件 6 | 7 | Vuescroll 有一些事件可以在特定场合下触发。 8 | 9 | ## 通用事件 10 | 11 | ### handle-resize 12 | 13 | #### 介绍 14 | 15 | 当内容尺寸发生变化时触发 16 | 17 | #### 事件详情 18 | 19 | | 参数 | 描述 | 20 | | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------- | 21 | | `vertical, horizontal, nativeEvent` | 给你传递 3 个参数, `vertical` 和 `horizontal` 告诉你管你垂直和水平滚动条的信息。第三个参数是触发滚动的原生事件。 | 22 | 23 | #### Usage 24 | 25 | ```html 26 | 27 | ``` 28 | 29 | ```javascript 30 | // ... 31 | { 32 | methods: { 33 | handleResize() { 34 | console.log('content has resized!') 35 | } 36 | } 37 | } 38 | ``` 39 | 40 | ::: tip 提示 41 | 你可以在**浏览器 dev-tool**下调节内容尺寸 然后查看结果。 42 | ::: 43 | [在 Codepen 上尝试 handle-resize](https://codepen.io/wangyi7099/pen/JLrVON) 44 | 45 | ### handle-scroll 46 | 47 | #### 介绍 48 | 49 | 当内容滚动的回收触发。 50 | 51 | #### 事件详情 52 | 53 | | 参数 | 描述 | 54 | | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------- | 55 | | `vertical, horizontal, nativeEvent` | 给你传递 3 个参数, `vertical` 和 `horizontal` 告诉你管你垂直和水平滚动条的信息。第三个参数是触发滚动的原生事件。 | 56 | 57 | #### Usage 58 | 59 | ```html 60 | 61 | ``` 62 | 63 | ```javascript 64 | // ... 65 | { 66 | methods: { 67 | handleScroll(vertical, horizontal, nativeEvent) { 68 | console.log(vertical, horizontal, nativeEvent) 69 | } 70 | } 71 | } 72 | ``` 73 | 74 | [在 Codepen 上尝试 handle-scroll](https://codepen.io/wangyi7099/pen/geGydZ) 75 | 76 | ### handle-scroll-complete 77 | 78 | #### 介绍 79 | 80 | 当滚动结束的时候触发 81 | 82 | #### 事件详情 83 | 84 | | 参数 | 描述 | 85 | | ---------------------- | -------------------------------------------------------------------------------- | 86 | | `vertical, horizontal` | 给你传递 2 个参数, `vertical` 和 `horizontal` 告诉你管你垂直和水平滚动条的信息。 | 87 | 88 | #### 用法 89 | 90 | ```html 91 | 92 | ``` 93 | 94 | ```javascript 95 | // ... 96 | { 97 | methods: { 98 | handleComplete() { 99 | console.log('scroll complete！') 100 | } 101 | } 102 | } 103 | ``` 104 | 105 | ::: tip 提示 106 | 需要打开 dev-tool 查看结果。 107 | ::: 108 | [在 Codepen 上尝试 handle-scroll-complete](https://codepen.io/wangyi7099/pen/YLVBNe) 109 | 110 | ## slide 模式的事件 111 | 112 | ### refresh/load 113 | 114 | #### 介绍 115 | 116 | 对应下拉刷新的每个阶段. 从开始到结束分别是 `refresh-activate`, `refresh-start`, `refresh-before-deactivate`, `refresh-deactivate` . 117 | 118 | #### 事件详情 119 | 120 | ##### refresh-activate, refresh-deactivate 121 | 122 | | 参数 | 描述 | 123 | | ---------------- | ----------------------------------------------------------- | 124 | | `vm, refreshDom` | `vm` 是当前 vuescroll 实例, `refreshDom` 是提示的那个 dom。 | 125 | 126 | ##### refresh-start 127 | 128 | | 参数 | 描述 | 129 | | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | 130 | | `vm, refreshDom, done` | `vm` 是当前 vuescroll 实例, `refreshDom` 是提示的那个 dom。`done` 是完成函数, 这个阶段你适合去抓取数据, 然后调用 `done()` 并且进入下一个阶段。 | 131 | 132 | ##### refresh-before-deactivate 133 | 134 | | 参数 | 描述 | 135 | | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 136 | | `vm, refreshDom, done` | `vm` 是当前 vuescroll 实例, `refreshDom` 是提示的那个 dom。`done` 是完成函数, 这个阶段你适合去给出提示(比如**加载成功！**或**加载失败！**), 然后调用 `done()` 并且进入下一个阶段。 | 137 | 138 | #### Usage 139 | 140 | ```html 141 | 147 | 148 | ``` 149 | 150 | ```javascript 151 | // ... 152 | { 153 | methods: { 154 | handleActivate(vm, refreshDom) { 155 | console.log(vm, refreshDom, 'handleActivate'); 156 | }, 157 | handleStart(vm, refreshDom, done) { 158 | console.log(vm, refreshDom, 'handleStart'); 159 | setTimeout(() => { 160 | done(); // load finished 161 | }, 2000) 162 | }, 163 | handleBeforeDeactivate(vm, refreshDom, done) { 164 | console.log(vm, refreshDom, 'handleBeforeDeactivate'); 165 | done(); 166 | }, 167 | handleDeactivate(vm, refreshDom) { 168 | console.log(vm, refreshDom, 'handleDeactivate'); 169 | } 170 | } 171 | } 172 | ``` 173 | 174 | **Load 是一样的，换汤不换药，请在 demo 里查看详情** 175 | 176 | [可以在这里查看一个小 demo](https://vuescroll-issue-list-demo-qlrlyskaji.now.sh//) 177 | -------------------------------------------------------------------------------- /docs/guide/event.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebarDepth: 2 3 | --- 4 | 5 | # Event 6 | 7 | Vuescroll has some events that will trigger in the specific circumstances. 8 | 9 | ## Common events 10 | 11 | ### handle-resize 12 | 13 | #### Introduction 14 | 15 | Trigger when content's size changed. 16 | 17 | #### Event Detail 18 | 19 | | params | description | 20 | | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | 21 | | `vertical, horizontal, nativeEvent` | Pass 3 params to you, `vertical` and `horizontal` tell you the information about vertical bar and horizontal bar, the thrid param is the native event. | 22 | 23 | #### Usage 24 | 25 | ```html 26 | 27 | ``` 28 | 29 | ```javascript 30 | // ... 31 | { 32 | methods: { 33 | handleResize() { 34 | console.log('content has resized!') 35 | } 36 | } 37 | } 38 | ``` 39 | 40 | ::: tip 41 | You can try to adjust the size of content in the **browser dev-tool** and see the result. 42 | ::: 43 | 44 | ### handle-scroll 45 | 46 | #### Introduction 47 | 48 | Trigger when content is scrolling. 49 | 50 | #### Event Detail 51 | 52 | | params | description | 53 | | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | 54 | | `vertical, horizontal, nativeEvent` | Pass 3 params to you, `vertical` and `horizontal` tell you the information about vertical bar and horizontal bar, the thrid param is the native event. | 55 | 56 | #### Usage 57 | 58 | ```html 59 | 60 | ``` 61 | 62 | ```javascript 63 | // ... 64 | { 65 | methods: { 66 | handleScroll(vertical, horizontal, nativeEvent) { 67 | console.log(vertical, horizontal, nativeEvent) 68 | } 69 | } 70 | } 71 | ``` 72 | 73 | ### handle-scroll-complete 74 | 75 | #### Introduction 76 | 77 | Trigger when scroll complete 78 | 79 | #### Event Detail 80 | 81 | | params | description | 82 | | ---------------------- | ----------------------------------------------------------------------------------------------------------------- | 83 | | `vertical, horizontal` | Pass 2 params to you, `vertical` and `horizontal` tell you the information about vertical bar and horizontal bar. | 84 | 85 | #### Usage 86 | 87 | ```html 88 | 89 | ``` 90 | 91 | ```javascript 92 | // ... 93 | { 94 | methods: { 95 | handleComplete() { 96 | console.log('scroll complete！') 97 | } 98 | } 99 | } 100 | ``` 101 | 102 | ::: tip 103 | Need to open dev-tool to see the result 104 | ::: 105 | 106 | ## Event for slide mode 107 | 108 | ### refresh/load 109 | 110 | #### Introduction 111 | 112 | corresponding to each stage of pull-refresh. From start to end are `refresh-activate`, `refresh-start`, `refresh-before-deactivate`, `refresh-deactivate` . 113 | 114 | #### Events Detail 115 | 116 | ##### refresh-activate, refresh-deactivate 117 | 118 | | params | description | 119 | | ---------------- | -------------------------------------------------------------------------------------- | 120 | | `vm, refreshDom` | `vm` is the current vuescroll instance, `refreshDom` is a dom that will show as a tip. | 121 | 122 | ##### refresh-start 123 | 124 | | params | description | 125 | | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 126 | | `vm, refreshDom, done` | `vm` is the current vuescroll instance, `refreshDom` is a dom that will show as a tip.`done` is the finish-function, it is a proper stage that you fetch data, and call the `done()` to go to next stage. | 127 | 128 | ##### refresh-before-deactive 129 | 130 | | params | description | 131 | | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 132 | | `vm, refreshDom, done` | `vm` is the current vuescroll instance, `refreshDom` is a dom that will show as a tip.`done` is the finish-function, it is a proper stage that you show the tip to user(such as `load successfully` or `load error` and so on), and call the `done()` to go to next stage. | 133 | 134 | #### Usage 135 | 136 | ```html 137 | 143 | 144 | ``` 145 | 146 | ```javascript 147 | // ... 148 | { 149 | methods: { 150 | handleActivate(vm, refreshDom) { 151 | console.log(vm, refreshDom, 'handleActivate'); 152 | }, 153 | handleStart(vm, refreshDom, done) { 154 | console.log(vm, refreshDom, 'handleStart'); 155 | seTimeout(() => { 156 | done(); // load finished 157 | }, 2000) 158 | }, 159 | handleBeforeDeactivate(vm, refreshDom, done) { 160 | console.log(vm, refreshDom, 'handleBeforeDeactivate'); 161 | done(); 162 | }, 163 | handleDeactivate(vm, refreshDom) { 164 | console.log(vm, refreshDom, 'handleDeactivate'); 165 | } 166 | } 167 | } 168 | ``` 169 | 170 | **Load is the same as reresh, please view it in demo** 171 | 172 | [A small demo you can checkout here](https://vuescroll-issue-list-demo-qlrlyskaji.now.sh//) 173 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Demo/Index.vue: -------------------------------------------------------------------------------- 1 | 80 | 81 | 182 | 183 | 287 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Demo/RefreshAndLoad.vue: -------------------------------------------------------------------------------- 1 | 105 | 106 | 246 | 247 | -------------------------------------------------------------------------------- /docs/.vuepress/components/Demo/CustomizeScrollbar.vue: -------------------------------------------------------------------------------- 1 | 178 | 179 | 270 | 271 | -------------------------------------------------------------------------------- /docs/zh/guide/configuration.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebarDepth: 2 3 | --- 4 | 5 | # 配置项 6 | 7 | Vuescroll 的配置项由 5 部分组成, 它们分别是`vuescroll`, `scrollPanel`, `bar`, `rail`, `scrollButton`. 8 | 9 | ## vuescroll 10 | 11 | ### 概览 12 | 13 | ```javascript 14 | vuescroll: { 15 | mode: 'native', 16 | sizeStrategy: 'percent', 17 | detectResize: true, 18 | /** 锁定一种滚动方向， 锁定的方向为水平或者垂直方向上滑动距离较大的那个方向 */ 19 | locking: true, 20 | } 21 | ``` 22 | 23 | ### mode 24 | 25 | - 类型: `native|slide` 26 | 27 | * 默认值: `native` 28 | 29 | 选择一个模式, **native** 或者 **slide**. 30 | 31 | ### sizeStrategy 32 | 33 | - 类型: `number|percent` 34 | 35 | * 默认值: `percent` 36 | 37 | 如果父容器不是固定高度，请设置为 `number` , 否则保持默认的`percent`即可。 38 | 39 | ### detectResize 40 | 41 | - 类型: `boolean` 42 | 43 | * 默认值: `true` 44 | 45 | 是否检测内容尺寸发生变化。 46 | 47 | ### locking 48 | 49 | - 类型: `boolean` 50 | - 默认值: `true` 51 | 52 | 是否锁定一种滚动方向， 锁定的方向为水平或者垂直方向上滑动距离较大的那个方向， 相关[issue #197](https://github.com/YvesCoding/vuescroll/issues/197) 53 | 54 | ### 尝试一下 55 | 56 | 57 | 58 | ## scrollPanel 59 | 60 | ::: tip 介绍 61 | scrollPanel 内容的包装. 我们通过改变 scrollPanel 的 scrollLeft 和 scrollTop 来使内容移动。 62 | ::: 63 | 64 | ### 概览 65 | 66 | ```javascript 67 | scrollPanel: { 68 | initialScrollY: false, 69 | initialScrollX: false, 70 | scrollingX: true, 71 | scrollingY: true, 72 | speed: 300, 73 | easing: undefined, 74 | verticalNativeBarPos: 'right', 75 | maxHeight:undefined, 76 | maxWidth:undefined, 77 | } 78 | ``` 79 | 80 | ### initialScrollY/initialScrollX 81 | 82 | - 类型: `number|string||false` 83 | 84 | - 默认值: `false` 85 | 86 | 只要组件`mounted`之后自动滚动的距离。 例如 **100** or **10%** 87 | 88 | ### scrollingX/scrollingY 89 | 90 | - 类型: `boolean` 91 | 92 | - 默认值: `true` 93 | 94 | 是否启用 x 或者 y 方向上的滚动。 95 | 96 | ### speed 97 | 98 | - 类型: `number` 99 | 100 | - 默认值: `300` 101 | 102 | 多长时间内完成一次滚动。 数值越小滚动的速度越快。 103 | 104 | ### easing 105 | 106 | - 类型: `string|undefined` 107 | 108 | - 默认值: `undefined` 109 | 110 | 滚动动画， 所有的动画如下： 111 | 112 | - `easeInQuad` 113 | - `easeOutQuad` 114 | - `easeInOutQuad` 115 | - `easeInCubic` 116 | - `easeOutCubic` 117 | - `easeInOutCubic` 118 | - `easeInQuart` 119 | - `easeOutQuart` 120 | - `easeInOutQuart` 121 | - `easeInQuint` 122 | - `easeOutQuint` 123 | - `easeInOutQuint` 124 | 125 | ### verticalNativeBarPos 126 | 127 | - 类型: `right|left` 128 | 129 | - 默认值: `right` 130 | 131 | 原生滚动条的位置。 132 | 133 | ## maxHeight 134 | 135 | - 类型: `number?` 136 | 137 | - 默认值: `undefined` 138 | 139 | 这是滚动条最大高度,内容高度小于 maxHeight 时高度自适应，超出的话出现滚动条。 140 | 141 | ### 尝试一下 142 | 143 | 144 | 145 | ## rail 146 | 147 | ### 概览 148 | 149 | ::: tip 介绍 150 | 滚动条移动所在位置。 151 | ::: 152 | 153 | ```javascript 154 | rail: { 155 | background: '#01a99a', 156 | opacity: 0, 157 | size: '6px', 158 | specifyBorderRadius: false, 159 | gutterOfEnds: null, 160 | gutterOfSide: '2px', 161 | keepShow: false 162 | } 163 | ``` 164 | 165 | ### background 166 | 167 | - 类型: `string` 168 | 169 | - 默认值: `#a5d6a7` 170 | 171 | 轨道的背景色。 172 | 173 | ### size 174 | 175 | - 类型: `string` 176 | 177 | - 默认值: `6px` 178 | 179 | 轨道的尺寸。 180 | 181 | ### opacity 182 | 183 | - 类型: `number` 184 | 185 | - 默认值: `0` 186 | 187 | 轨道的透明度。 188 | 189 | ### specifyBorderRadius 190 | 191 | - 类型: `false|string` 192 | 193 | - 默认值: `false` 194 | 195 | 是否指定轨道的 borderRadius， 如果不那么将会自动设置。 196 | 197 | ### gutterOfEnds 198 | 199 | - 类型: `string` 200 | 201 | - 默认值: `2px` 202 | 203 | 轨道距 x 和 y 轴两端的距离。 204 | 205 | ### gutterOfSide 206 | 207 | - 类型: `string` 208 | 209 | - 默认值: `2px` 210 | 211 | 距离容器的距离。 212 | 213 | ### keepShow 214 | 215 | - 类型: `boolean` 216 | 217 | - 默认值: `false` 218 | 219 | 是否即使 bar 不存在的情况下也保持显示。 220 | 221 | ### border 222 | 223 | - 类型: `string` 224 | 225 | - 默认值: `none` 226 | 227 | 轨道的边框。 228 | 229 | ### 尝试一下! 230 | 231 | 232 | 233 | ## bar 234 | 235 | ::: tip 介绍 236 | 滚动条，类似于原生的滚动条。 237 | ::: 238 | 239 | ::: warning 警告 240 | vRail, hRail, vBar, hBar, pos 都已经失效了。 请用 rail, bar 来代替。 设置 rail，bar 将会对垂直，水平滚动条同时生效。 241 | ::: 242 | 243 | ### 概览 244 | 245 | ```javascript 246 | bar: { 247 | showDelay: 500, 248 | onlyShowBarOnScroll: true, 249 | keepShow: false, 250 | background: '#c1c1c1', 251 | opacity: 1, 252 | hoverStyle: false, 253 | specifyBorderRadius: false, 254 | minSize: false, 255 | size: '6px', 256 | disable: false, 257 | } 258 | ``` 259 | 260 | ### onlyShowBarOnScroll 261 | 262 | - 类型: `boolean` 263 | 264 | - 默认值: `true` 265 | 266 | 是否只在滚动时显示 bar。 267 | 268 | ### showDelay 269 | 270 | - 类型: `number` 271 | 272 | - 默认值: `500` 273 | 274 | 在鼠标离开容器后多长时间隐藏滚动条。 275 | 276 | ### background 277 | 278 | - 类型: `string` 279 | 280 | - 默认值: `#4caf50` 281 | 282 | 滚动条背景色。 283 | 284 | ### keepShow 285 | 286 | - 类型: `boolean` 287 | 288 | - 默认值: `false` 289 | 290 | 滚动条是否保持显示。 291 | 292 | ### opacity 293 | 294 | - 类型: `number` 295 | 296 | - 默认值: `1` 297 | 298 | 滚动条透明度。 299 | 300 | ### specifyBorderRadius 301 | 302 | - 类型: `false|string` 303 | 304 | - 默认值: `false` 305 | 306 | 是否指定滚动条的 borderRadius， 如果不那么和轨道的保持一致。 307 | 308 | ### minSize 309 | 310 | - 类型: `number` 311 | 312 | - 默认值: `0` 313 | 314 | 为 bar 设置一个最小尺寸, 从 0 到 1. 如 0.3, 代表 30%. 315 | 316 | ### size 317 | 318 | - 类型: `string` 319 | 320 | - 默认值: `6px` 321 | 322 | bar 的尺寸。 323 | 324 | ### disable 325 | 326 | - 类型: `boolean` 327 | 328 | - 默认值: `false` 329 | 330 | 是否禁用滚动条。 331 | 332 | ### 尝试一下! 333 | 334 | 335 | 336 | ## scrollButton 337 | 338 | ### 概览 339 | 340 | ```javascript 341 | scrollButton: { 342 | enable: false, 343 | background: 'rgb(3, 185, 118)', 344 | opacity: 1, 345 | step: 180, 346 | mousedownStep: 30 347 | } 348 | ``` 349 | 350 | ### enable 351 | 352 | - 类型: `boolean` 353 | 354 | - 默认值: `false` 355 | 356 | 是否启用 scrollButton. 357 | 358 | ### background 359 | 360 | - 类型: `string` 361 | 362 | - 默认值: `rgb(3, 185, 118)` 363 | 364 | scrollButton 的背景色. 365 | 366 | ### opacity 367 | 368 | - 类型: `number` 369 | 370 | - 默认值: `1` 371 | 372 | scrollButton 的透明度。 373 | 374 | ### step 375 | 376 | - 类型: `number` 377 | 378 | - 默认值: `180` 379 | 380 | 每次当你点击 scrollButton 所滚动的距离。 381 | 382 | ### mousedownStep 383 | 384 | - 类型: `number` 385 | 386 | - 默认值: `30` 387 | 388 | 每次当你按住 scrollButton 所滚动的距离。 389 | 390 | ### 尝试一下! 391 | 392 | 393 | 394 | ## vuescroll(native 模式) 395 | 396 | ### 概览 397 | 398 | ```javascript 399 | vuescroll: { 400 | wheelScrollDuration: 0, 401 | wheelDirectionReverse: false, 402 | checkShifKey: true 403 | } 404 | ``` 405 | 406 | ### wheelScrollDuration 407 | 408 | - 类型: `number` 409 | - 默认值: `0` 410 | 411 | 滚轮滚动一段距离所需时间。 412 | 413 | ### wheelDirectionReverse 414 | 415 | - 类型: `boolean` 416 | - 默认值: `false` 417 | 418 | 是否使滚轮方向相反 419 | 420 | ### checkShifKey 421 | 422 | - 类型: `boolean` 423 | - 默认值: `true` 424 | 425 | 是否检测 shift 键位 具体请查看 [pr #234](https://github.com/YvesCoding/vuescroll/pull/234) 426 | 427 | ## vuescroll(Slide 模式) 428 | 429 | ### 概览 430 | 431 | ```javascript 432 | vuescroll: { 433 | pullRefresh: { 434 | enable: false, 435 | tips: { 436 | deactive: 'Pull to Refresh', 437 | active: 'Release to Refresh', 438 | start: 'Refreshing...', 439 | beforeDeactive: 'Refresh Successfully!' 440 | } 441 | }, 442 | pushLoad: { 443 | enable: false, 444 | tips: { 445 | deactive: 'Push to Load', 446 | active: 'Release to Load', 447 | start: 'Loading...', 448 | beforeDeactive: 'Load Successfully!' 449 | }, 450 | auto: false, 451 | autoLoadDistance: 0 452 | }, 453 | paging: false, 454 | zooming: true, 455 | snapping: { 456 | enable: false, 457 | width: 100, 458 | height: 100 459 | }, 460 | scroller: { 461 | /* 462 | Allow to scroll out of boundaries 463 | true or false or an array specify which direction can be 464 | bounced. The options can be: 465 | ['top','bottom','left','right'] 466 | */ 467 | bouncing: { 468 | top: 100, 469 | bottom: 100, 470 | left: 100, 471 | right: 100 472 | }, 473 | /** Enable locking to the main axis if user moves only slightly on one of them at start */ 474 | locking: true, 475 | /** Minimum zoom level */ 476 | minZoom: 0.5, 477 | /** Maximum zoom level */ 478 | maxZoom: 3, 479 | /** Multiply or decrease scrolling speed **/ 480 | speedMultiplier: 1, 481 | /** This configures the amount of change applied to deceleration when reaching boundaries **/ 482 | penetrationDeceleration: 0.03, 483 | /** This configures the amount of change applied to acceleration when reaching boundaries **/ 484 | penetrationAcceleration: 0.08, 485 | /** Whether call e.preventDefault event when sliding the content or not */ 486 | preventDefault: true, 487 | /** Whether call preventDefault when (mouse/touch)move*/ 488 | preventDefaultOnMove: true, 489 | // whether to disable scroller or not. 490 | disable: false 491 | } 492 | } 493 | ``` 494 | 495 | ### pullRefresh 496 | 497 | - 类型: `Object` 498 | 499 | - 默认值: 500 | 501 | ```javascript 502 | { 503 | enable: false, 504 | tips: { 505 | deactive: 'Pull to Refresh', 506 | active: 'Release to Refresh', 507 | start: 'Refreshing...', 508 | beforeDeactive: 'Refresh Successfully!' 509 | } 510 | }, 511 | ``` 512 | 513 | ### pushLoad 514 | 515 | - 类型: `Object` 516 | 517 | - 默认值: 518 | 519 | ```javascript 520 | { 521 | enable: false, 522 | tips: { 523 | deactive: 'Push to Load', 524 | active: 'Release to Load', 525 | start: 'Loading...', 526 | beforeDeactive: 'Load Successfully!' 527 | }, 528 | auto: false, 529 | autoLoadDistance: 0 530 | } 531 | ``` 532 | 533 | ### pushLoad.auto 534 | 535 | - 类型: `boolean` 536 | - 默认值: `false` 537 | 538 | 是否自动触发加载。 539 | 540 | ### pushLoad.autoLoadDistance 541 | 542 | - 类型: `number` 543 | - 默认值: `0` 544 | 545 | 距离底部触发自动加载的距离。 546 | 547 | ### 尝试一下 548 | 549 | [一个小例子](https://vuescroll-issue-list-demo-qlrlyskaji.now.sh//) 550 | 551 | 你也可以通过 [slot](slot.html) 来设置不同的加载/刷新动画. 552 | -------------------------------------------------------------------------------- /docs/guide/configuration.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebarDepth: 2 3 | --- 4 | 5 | # Configuration 6 | 7 | Vuescroll's options are composed of five parts, they are `vuescroll`, `scrollPanel`, `bar`, `rail`, `scrollButton` respectively. 8 | 9 | ## vuescroll 10 | 11 | ### Overview 12 | 13 | ```javascript 14 | vuescroll: { 15 | mode: 'native', 16 | sizeStrategy: 'percent', 17 | detectResize: true, 18 | /** Enable locking to the main axis if user moves only slightly on one of them at start */ 19 | locking: true, 20 | } 21 | ``` 22 | 23 | ### mode 24 | 25 | - Type: `native|slide` 26 | 27 | * Default: `native` 28 | 29 | Choose a mode of vuescroll, **native** or **slide**。 30 | 31 | ### sizeStrategy 32 | 33 | - Type: `number|percent` 34 | 35 | * Default: `percent` 36 | 37 | If the parent container is not at a fixed height, set it to `number`, or keep the default `percent`. 38 | 39 | ### detectResize 40 | 41 | - Type: `boolean` 42 | 43 | * Default: `true` 44 | 45 | Whether to detect dom resize or not 46 | 47 | ### locking 48 | 49 | - Type: `boolean` 50 | - Default: `true` 51 | 52 | Enable locking to the main axis if user moves only slightly on one of them at start. See [issue #197](https://github.com/YvesCoding/vuescroll/issues/197) 53 | 54 | ### Have a try 55 | 56 | 57 | 58 | ## scrollPanel 59 | 60 | ::: tip Introduction 61 | scrollPanel is a wrap of content. We just change scrollPanel's scrollTop or scrollLeft to make content moved. 62 | ::: 63 | 64 | ### Overview 65 | 66 | ```javascript 67 | scrollPanel: { 68 | initialScrollY: false, 69 | initialScrollX: false, 70 | scrollingX: true, 71 | scrollingY: true, 72 | speed: 300, 73 | easing: undefined, 74 | verticalNativeBarPos: 'right' 75 | } 76 | ``` 77 | 78 | ### initialScrollY/initialScrollX 79 | 80 | - Type: `number|string||false` 81 | 82 | - Default: `false` 83 | 84 | The distance that will scroll as soon as the component mounts .e.g.**100** or **10%** 85 | 86 | ### scrollingX/scrollingY 87 | 88 | - Type: `boolean` 89 | 90 | - Default: `true` 91 | 92 | Whether to enable scrolling in the X or Y direction 93 | 94 | ### speed 95 | 96 | - Type: `number` 97 | 98 | - Default: `300` 99 | 100 | The time required to complete the scroll,the smaller the value, the faster the speed 101 | 102 | ### easing 103 | 104 | - Type: `string|undefined` 105 | 106 | - Default: `undefined` 107 | 108 | Scrolling animations. All the animations are as follows: 109 | 110 | - `easeInQuad` 111 | - `easeOutQuad` 112 | - `easeInOutQuad` 113 | - `easeInCubic` 114 | - `easeOutCubic` 115 | - `easeInOutCubic` 116 | - `easeInQuart` 117 | - `easeOutQuart` 118 | - `easeInOutQuart` 119 | - `easeInQuint` 120 | - `easeOutQuint` 121 | - `easeInOutQuint` 122 | 123 | ### verticalNativeBarPos 124 | 125 | - Type: `right|left` 126 | 127 | - Default: `right` 128 | 129 | The ntive vertical scrollbar position. 130 | 131 | ## maxHeight 132 | 133 | - Type: `number?` 134 | 135 | - Default: `undefined` 136 | 137 | This is the maximum height of the scroll bar. When the content height is less than maxHeight, the height is adaptive. If it exceeds, the scroll bar appears. 138 | 139 | ### Have a try 140 | 141 | 142 | 143 | ## rail 144 | 145 | ### Overview 146 | 147 | ::: tip Introduction 148 | The place where srollbar moves. 149 | ::: 150 | 151 | ```javascript 152 | rail: { 153 | background: '#01a99a', 154 | opacity: 0, 155 | size: '6px', 156 | specifyBorderRadius: false, 157 | gutterOfEnds: null, 158 | gutterOfSide: '2px', 159 | keepShow: false 160 | } 161 | ``` 162 | 163 | ### background 164 | 165 | - Type: `string` 166 | 167 | - Default: `#a5d6a7` 168 | 169 | Rail's background 170 | 171 | ### size 172 | 173 | - Type: `string` 174 | 175 | - Default: `6px` 176 | 177 | Rail's size. 178 | 179 | ### opacity 180 | 181 | - Type: `number` 182 | 183 | - Default: `0` 184 | 185 | Rail's opacity 186 | 187 | ### specifyBorderRadius 188 | 189 | - Type: `false|string` 190 | 191 | - Default: `false` 192 | 193 | Specify rail's border-radius, or the border-radius of rail will be set automatically. 194 | 195 | ### gutterOfEnds 196 | 197 | - Type: `string` 198 | 199 | - Default: `2px` 200 | 201 | The distance from the two ends of the X axis and Y axis. 202 | 203 | ### gutterOfSide 204 | 205 | - Type: `string` 206 | 207 | - Default: `2px` 208 | 209 | The distance from the side of container. 210 | 211 | ### keepShow 212 | 213 | - Type: `boolean` 214 | 215 | - Default: `false` 216 | 217 | Whether to keep showing rail even there is no bar. 218 | 219 | ### border 220 | 221 | - Type: `string` 222 | 223 | - Default: `none` 224 | 225 | Rail's border. 226 | 227 | ### Have a try! 228 | 229 | 230 | 231 | ## bar 232 | 233 | ::: tip Introduction 234 | Scrollbar, like native scrollbar. 235 | ::: 236 | 237 | ::: warning 238 | vRail, hRail, vBar, hBar, pos have been deprecated, use rail, bar instead。 set rail，bar will work for both vertical and horizontal. 239 | ::: 240 | 241 | ### Overview 242 | 243 | ```javascript 244 | bar: { 245 | showDelay: 500, 246 | onlyShowBarOnScroll: true, 247 | keepShow: false, 248 | background: '#c1c1c1', 249 | opacity: 1, 250 | hoverStyle: false， 251 | specifyBorderRadius: false, 252 | minSize: 0, 253 | size: '6px', 254 | disable: false 255 | } 256 | ``` 257 | 258 | ### onlyShowBarOnScroll 259 | 260 | - Type: `boolean` 261 | 262 | - Default: `true` 263 | 264 | Whether to only show bar while scrolling, 265 | 266 | ### showDelay 267 | 268 | - Type: `number` 269 | 270 | - Default: `500` 271 | 272 | How long to hide bar after mouseleave, 273 | 274 | ### background 275 | 276 | - Type: `string` 277 | 278 | - Default: `#4caf50` 279 | 280 | Bar's background. 281 | 282 | ### keepShow 283 | 284 | - Type: `boolean` 285 | 286 | - Default: `false` 287 | 288 | Whether to keep showing or not, 289 | 290 | ### opacity 291 | 292 | - Type: `number` 293 | 294 | - Default: `1` 295 | 296 | Bar's opacity, 297 | 298 | ### specifyBorderRadius 299 | 300 | - Type: `false|string` 301 | 302 | - Default: `false` 303 | 304 | Specify bar's border radius, or it will be consistent with rail's. 305 | 306 | ### minSize 307 | 308 | - Type: `number` 309 | 310 | - Default: `0` 311 | 312 | Set a min size for bar, from 0 to 1. Like 0.3, represents 30%. 313 | 314 | ### disable 315 | 316 | - Type: `boolean` 317 | 318 | - Default: `false` 319 | 320 | Whether to disable bar. 321 | 322 | ### size 323 | 324 | - Type: `string` 325 | 326 | - Default: `6px` 327 | 328 | Bar's width or size. 329 | 330 | ### Have a try! 331 | 332 | 333 | 334 | ## scrollButton 335 | 336 | ### Overview 337 | 338 | ```javascript 339 | scrollButton: { 340 | enable: false, 341 | background: 'rgb(3, 185, 118)', 342 | opacity: 1, 343 | step: 180, 344 | mousedownStep: 30 345 | } 346 | ``` 347 | 348 | ### enable 349 | 350 | - Type: `boolean` 351 | 352 | - Default: `false` 353 | 354 | Whether to enable scrollButton. 355 | 356 | ### background 357 | 358 | - Type: `string` 359 | 360 | - Default: `rgb(3, 185, 118)` 361 | 362 | scrollButton's background. 363 | 364 | ### opacity 365 | 366 | - Type: `number` 367 | 368 | - Default: `1` 369 | 370 | scrollButton's opacity. 371 | 372 | ### step 373 | 374 | - Type: `number` 375 | 376 | - Default: `180` 377 | 378 | The distance to scroll each time you click the scrollButton. 379 | 380 | ### mousedownStep 381 | 382 | - Type: `number` 383 | 384 | - Default: `30` 385 | 386 | The distance to scroll when you hold pressing the scrollButton. 387 | 388 | ### Have a try! 389 | 390 | 391 | 392 | ## vuescroll(native mode) 393 | 394 | ### OverView 395 | 396 | ```javascript 397 | vuescroll: { 398 | wheelScrollDuration: 0, 399 | wheelDirectionReverse: false, 400 | checkShifKey: true 401 | } 402 | ``` 403 | 404 | ### wheelScrollDuration 405 | 406 | - Type: `number` 407 | - Default: `0` 408 | 409 | The time it takes for the mouse wheel to scroll for a certain distance. 410 | 411 | ### wheelDirectionReverse 412 | 413 | - Type: `boolean` 414 | - Default: `false` 415 | 416 | Whether to make wheel scrolling's direction reverse. 417 | 418 | ### checkShifKey 419 | 420 | - Type: `boolean` 421 | - Default: `true` 422 | 423 | Whether check shif key or not, see [pr #234](https://github.com/YvesCoding/vuescroll/pull/234) 424 | 425 | ## vuescroll(Slide mode) 426 | 427 | ### OverView 428 | 429 | ```javascript 430 | vuescroll: { 431 | pullRefresh: { 432 | enable: false, 433 | tips: { 434 | deactive: 'Pull to Refresh', 435 | active: 'Release to Refresh', 436 | start: 'Refreshing...', 437 | beforeDeactive: 'Refresh Successfully!' 438 | } 439 | }, 440 | pushLoad: { 441 | enable: false, 442 | tips: { 443 | deactive: 'Push to Load', 444 | active: 'Release to Load', 445 | start: 'Loading...', 446 | beforeDeactive: 'Load Successfully!' 447 | }, 448 | auto: false, 449 | autoLoadDistance: 0 450 | }, 451 | paging: false, 452 | zooming: true, 453 | snapping: { 454 | enable: false, 455 | width: 100, 456 | height: 100 457 | }, 458 | scroller: { 459 | /* 460 | Allow to scroll out of boundaries 461 | true or false or an array specify which direction can be 462 | bounced. The options can be: 463 | ['top','bottom','left','right'] 464 | */ 465 | bouncing: { 466 | top: 100, 467 | bottom: 100, 468 | left: 100, 469 | right: 100 470 | }, 471 | /** Enable locking to the main axis if user moves only slightly on one of them at start */ 472 | locking: true, 473 | /** Minimum zoom level */ 474 | minZoom: 0.5, 475 | /** Maximum zoom level */ 476 | maxZoom: 3, 477 | /** Multiply or decrease scrolling speed **/ 478 | speedMultiplier: 1, 479 | /** This configures the amount of change applied to deceleration when reaching boundaries **/ 480 | penetrationDeceleration: 0.03, 481 | /** This configures the amount of change applied to acceleration when reaching boundaries **/ 482 | penetrationAcceleration: 0.08, 483 | /** Whether call e.preventDefault event when sliding the content or not */ 484 | preventDefault: true, 485 | /** Whether call preventDefault when (mouse/touch)move*/ 486 | preventDefaultOnMove: true, 487 | // whether to disable scroller or not. 488 | disable: false 489 | } 490 | } 491 | ``` 492 | 493 | ### pullRefresh 494 | 495 | - Type: `Object` 496 | 497 | - Default: 498 | 499 | ```javascript 500 | { 501 | enable: false, 502 | tips: { 503 | deactive: 'Pull to Refresh', 504 | active: 'Release to Refresh', 505 | start: 'Refreshing...', 506 | beforeDeactive: 'Refresh Successfully!' 507 | } 508 | }, 509 | ``` 510 | 511 | ### pushLoad 512 | 513 | - Type: `Object` 514 | 515 | - Default: 516 | 517 | ```javascript 518 | { 519 | enable: false, 520 | tips: { 521 | deactive: 'Push to Load', 522 | active: 'Release to Load', 523 | start: 'Loading...', 524 | beforeDeactive: 'Load Successfully!' 525 | }, 526 | auto: false, 527 | autoLoadDistance: 0 528 | } 529 | ``` 530 | 531 | ### pushLoad.auto 532 | 533 | - Type: `boolean` 534 | - Default: `false` 535 | 536 | Whether the load is triggered automatically. 537 | 538 | ### pushLoad.autoLoadDistance 539 | 540 | - Type: `number` 541 | - Default: `0` 542 | 543 | The distance from the bottom to trigger the automatic loading. 544 | 545 | ### Have a try 546 | 547 | [A small example](https://vuescroll-issue-list-demo-qlrlyskaji.now.sh//) 548 | 549 | You can alse set different refreh/load animations via [slot](slot.html). 550 | --------------------------------------------------------------------------------