UI

吸顶导航组件，支持滑动

soucre example

使用


 



<div class="parent">
    <StickyNav :options="stickyOptions"/>
    <!--custom contents-->
</div>

StickNav会在页面到达导航条位置的时候吸顶，超过父容器高度后恢复

参数


 








    { 
        navs:['aa','bb','<a>cc</a>'], 
        selectionSelecotr:'sections', 
        showButton:false,
        disable:false,
        zIndex:1000,
        stickyTop:-1,
        threshold:0,
    }
  • navs :数组、必填项，填写每一项的内容
  • sectionsSelecotr :导航内容的Class选择器,不需要加上.
  • showButton: 是否显示全部分类按钮，默认不显示
  • disabled : 是否禁用吸顶，默认是false
  • zIndex : 层级，默认1000
  • stickyTop: 吸顶距离顶部的位置，默认-1
  • threshold: 到达内容之前多少像素则选中 默认0

方法


 
 

    <StickyNav :options="stickyOptions" 
                @changed="onchange" 
                @expand="expand"/>

methods:{
    //当前选中值改变时触发
    onchange(index){
        console.log(index);
    },
    //展开状态发生改变时触发，state:ture 展开，false 关闭
    expand(state){
      
    }

}

HTML

生成的html结构

    <div class="sticky-nav-container showAll">
         <!--设置了showButton后显示-->
        <span class="stickyNav-expand" >
            <span class="icon-arrow"></span>
        </span>
        <div class="all-topbar">请选择分类</div>
        <!-- end-->
        <div class="sticky-nav">
            <ul>
                <li class="sticky-nav-item active"></li>
                <li class="sticky-nav-item"></li>
            </ul>
        </div>
       
    </div>

TIP

当前选中会添加 active 样式

展开全部分类后添加showAll 样式

导航项不设置宽度的情况下，自动等分

TODO

  • 添加垂直方向的导航

Tabs

使用

<Tabs :sticky="true">
    <Tab label="tab1">内容</Tab>
    <Tab label="tab1" isDisable="true">内容</Tab>
    <Tab label="<span>tab1</span>">内容</Tab>
</Tabs>
  • sticky 是否吸顶 默认false
  • lable tab标题，可以填html
  • isDisable 是否禁用
  • Tab标签内为 主内容

方法

<Tabs @changed="changed">
</Tabs>

HTML

 <div class="tabs-container">
    <div class="tabs-nav">
         <span class="tabs-nav-item active"></span>
         <span class="tabs-nav-item"></span>
         <span class="tabs-nav-item"></span>
    </div>
    <div class="tabs-panels">
        <section class="tabs-panel-content"></div>
        <section class="tabs-panel-content"></div>
        <section class="tabs-panel-content"></div>
    </div> 
 </div>