vue-anchor-scroll

    1.0.7 • Public • Published

    anchor-scroll

    基于vue的scroll跳转插件,代替锚点的需求

    npm下载

    npm install vue-anchor-scroll

    main.js

    import AnchorScroll from 'vue-anchor-scroll' Vue.use(AnchorScroll)

    template

    <anchor-scroll>
         <trigger-view trigger-key="xxx">
                内部与外部均可包裹元素
         </trigger-view>
         <anchor-view anchor-key="xxx">
              内部与外部均可包裹元素
         </anchor-view>
    </anchor-scroll>
    

    简介

    anchor-scroll标签需要包裹trigger-view与anchor-view,只需保证trigger-key与anchor-key值一样,即可通过点击trigger-view页面滚动至anchor-view处。 目前只适用于浏览器滚动条,例如某个div的scroll是不支持的。

    文档

    anchor-scroll

    属性 可选值 默认值 类型 说明
    animation-time -- 300 Number 动画执行时间
    animation-step -- 10 Number 动画执行间隔,切记不可设置为0
    animation-tips true,false true Boolean 滚动至目标区域后是否进行闪烁提示
    事件名 执行时机 返回值 说明
    changeBefore 滚动执行开始前 滚动条位置 --
    changeAfter 滚动执行结束后 滚动条位置 --

    trigger-view

    属性 可选值 默认值 类型 说明
    trigger-key -- -- String 执行跳转的依据,需要与anchor-key对应

    trigger-view

    属性 可选值 默认值 类型 说明
    anchor-key -- -- String 执行跳转的依据,需要与trigger-key对应

    bug修复记录

    1.0.3当跳转目标的高度大于视口高度时,判断出错(判断反了)

    Keywords

    none

    Install

    npm i vue-anchor-scroll

    DownloadsWeekly Downloads

    4

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    111 kB

    Total Files

    15

    Last publish

    Collaborators

    • wangkaiqiang001