今天给大家分享一个超不错的Vue手机端导航吸顶组件VueStickyNav。

vue-sticky-nav 基于vue2.x实现的导航粘性吸顶效果。支持自定义参数配置，兼容所有主流的浏览器。

VueStickyNav会在页面到达导航条位置的时候粘住导航，超过父容器高度后恢复。

安装

$ npm i vue-sticky-nav -S

使用组件

<template>
  <div class="sticky-wrap">
    <StickyNav :options="stickyOptions" @changed="onchange" @expand="expand" />
    <!-- ...内容 -->
  </div>
</template>

<script>
  import {StickyNav} from 'vue-sticky-nav'
  export default {
    components: { StickyNav },
    data () {
      return {
        stickyOptions: {
          navs:['aa','bb','<a>cc</a>'], 
          selectionSelecotr:'sections', 
          showButton:false,
          scrollAnimate:true,
          scrollShow:false,
          disable:false,
          scrollDownHide:false
          zIndex:1000,
          stickyTop:-1,
          threshold:0,
        }
      }
    },
    methods: {
      //当前选中值改变时触发
      onchange(index){
        console.log(index);
      },
      //展开状态发生改变时触发，state:ture 展开，false 关闭
      expand(state){...}
    }
  }
</script>

Options参数

• navs :数组、必填项，填写每一项的内容
• sectionsSelecotr :导航内容的Class选择器,不需要加上.
• showButton: 是否显示全部分类按钮，默认不显示
• disabled : 是否禁用吸顶，默认是false
• scrollAnimate : 导航滚动是否开启动画，默认是true
• scrollShow: 是否滚动到楼层才展示，默认false
• scrollDownHide: 是否向下滚动时隐藏，向上和静止时展示展示 默认false
• zIndex : 层级，默认1000
• stickyTop: 吸顶距离顶部的位置，默认-1
• threshold: 到达内容之前多少像素则选中 默认0

非常ok的一款移动端粘性吸顶组件，大家如果在项目中需要用到的话，不妨去看看。

# 预览地址
http://eijil.gitee.io/vue-sticky-nav/

# 仓库地址
https://github.com/eijil/vue-sticky-nav

好了，今天的分享就到这里。希望对大家有所帮助哈~~