Vue-scroll-behavior:便捷定制导航路径上的滚动行为,尤其在 hash 模式下

阅读 824
收藏 39
2017-06-08
原文链接:github.com

Demo

You can check vue-scroll-behavior demos at:

Douban: jeneser.github.io/douban

Simple: jeneser.github.io/vue-scroll-…

Installation

NPM

npm install vue-scroll-behavior --save
import vueScrollBehavior from 'vue-scroll-behavior'

Vue.use(vueScrollBehavior, { router: router })

Direct include

If you are using Vue globally, just include vue-scroll-behavior.js and it will automatically install it. Then, you need call Vue.$vueScrollBehavior(router) pass the router instance router.

<script src="path/to/vue-scroll-behavior.js"></script>

<script>
  Vue.$vueScrollBehavior(router)
</script>

CDN

<script src="https://unpkg.com/vue-scroll-behavior@0.1.5/dist/vue-scroll-behavior.js"></script>

Description

When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does. vue-router allows you to achieve these and even better. But, vue-router scroll behavior feature only works in HTML5 history mode...

vue-scroll-behavior allows you to completely customize the scroll behavior in HTML5 history mode and hash mode.

Features

  • Simplicity - only need to call Vue.vueScrollBehavior(router)
  • Compatibility - Working in HTML5 history mode and hash mode

Example

When used with a module system, you can install it via Vue.use(), then pass some opts:

import Vue from 'vue'
import router from './router'
import vueScrollBehavior from 'vue-scroll-behavior'

// Using vueScrollBehavior
Vue.use(vueScrollBehavior, {
  router: router,
  maxLength: 100,
  ignore: [/\/boo/, /\/zoo/],
})

For additional examples and detailed description check the demo. jeneser.github.io/douban

You can clone this repository. Check the silmp demo.

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

Options

List of available Options:

Prop Data Type Default Description
router Object The router instance: const router = new VueRouter({})
ignore Array [ ] RegExp list to ignore some routes
maxLength Number 50 Saved history List max length

ChangeLog

  • June 4, 2017:
    • Fix some bug, Perform browser testing
    • Publish @0.1.2
  • June 5, 2017:
    • Publish @0.1.3
    • Publish @0.1.4
  • June 7, 2017:
    • Publish @0.1.5 Add some opts

Contribute

Please make sure to read the Contributing Guide before making a pull request.

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build library and demo for production
npm run build

License

MIT Copyright (c) 2017 Jeneser

评论