更新记录

v1.0.2（2019-08-02）

新增滚动过渡动画选项transitionShow，默认值false。如无特殊要求，不建议开启，可能会影响性能。

v1.20190726（2019-07-26）

第一次发布

平台兼容性

luBarTabNav--选项卡导航栏

简介

这是一款选项卡导航栏组件，最佳锚点<a href="#item1"></a>定位替代组件。

组件使用

在script中使用

import luBarTabNav from "@/components/lu-bar-tab-nav/lu-bar-tab-nav.vue";
export default {
    components:{luBarTabNav},
    data() {
        return {
        };
    },
    onPageScroll:function(e){
        this.$refs.barTabNav._selectedTab(e.scrollTop);
    },

}

在template中使用

 <luBarTabNav :tabList="tabList" 
     :barFixed="barFixed" 
     :iconShow="iconShow"
     :transitionShow="transitionShow"
     :barHeight="barHeight"
     :barTop="barTop" 
     :barId="barId" 
     ref="barTabNav">

</luBarTabNav>

props

*注意在APP下建议禁用transitionShow，不然会引起点击触发滚动中选项卡导航栏消失的bug。

tabList

演示示例

已上传使用示例，可下载示例项目。

<template>
    <view class="page-content">
        <view class="banner">
            产品图占位或其他内容
        </view>
        <luBarTabNav :tabList="tabList" :barFixed="barFixed" :iconShow="iconShow" :transitionShow="transitionShow" :barHeight="barHeight" :barTop="barTop" :barId="barId" ref="barTabNav">
            <view id="item1" class="tabbody">
                产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br> 产品内容1<br>
            </view>
            <view id="item2" class="tabbody">
                产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br> 产品内容2<br>
            </view>
            <view id="item3" class="tabbody">
                产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br> 产品内容3<br>
            </view>
        </luBarTabNav>
    </view>
</template>
<script>
    import luBarTabNav from "@/components/lu-bar-tab-nav/lu-bar-tab-nav.vue";
    export default {
        components: {
            luBarTabNav
        },
        data() {
            return {
                barFixed: true,
                barHeight: "44",
                barTop: 0,
                iconShow: true,
                barId: "0",
                tabList: [{
                    text: "产品介绍1",
                    navTarget: "#item1",
                    iconClass: "icon01",
                    iconImage: "",
                    selectedIconClass: "",
                    selectedIconImage: ""
                }, {
                    text: "产品介绍2",
                    navTarget: "#item2",
                    iconClass: "icon02",
                    iconImage: "",
                    selectedIconClass: "",
                    selectedIconImage: ""
                }, {
                    text: "产品介绍3",
                    navTarget: "#item3",
                    iconClass: "icon03",
                    iconImage: "",
                    selectedIconClass: "",
                    selectedIconImage: ""
                }]
            };
        },
        onPageScroll: function(e) {
            this.$refs.barTabNav._selectedTab(e.scrollTop);
        },

    }
</script>

<style>
    .page-content {
        position: relative;
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        background-color: #eee;
        font-size: 14px;
    }

    .banner {
        position: relative;
        width: 100%;
        height: 200px;
    }

    .tabbody {
        position: relative;
        width: 100%;
        border-bottom: 3px solid #4CD964;
    }
</style>