更新记录

1.0.4（2023-05-24） 下载此版本

细节优化。

1.0.3（2023-05-10） 下载此版本

细节优化。

1.0.2（2023-05-06） 下载此版本

细节优化。

平台兼容性

uni-app

其他

kevy-nav

介绍

漂亮大气的菱形导航通用组件，插件含源码你可以随意发挥。

方法和属性

使用说明

<template>
    <view class="content">
        <view class="t-demo-title">少量标签效果如下：</view>
        <kevy-nav :navItems="items" @click="myClick"></kevy-nav>
        <view class="t-demo-title">大量标签点击自动滚动效果如下：</view>
        <kevy-nav :navItems="items1" @click="myClick"></kevy-nav>
        <view class="t-demo-title">页面大气选项卡：</view>
        <kevy-nav :navItems="items2" @click="myClick"></kevy-nav>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                items: [],
                items1: [],
                items2: [],
            }
        },
        onLoad() {
            //这里是onLoad方法里来加载数据
            this.items = ['关注', '推荐', '热榜', '发现', '视频'];
            this.items1 = ['关注', '推荐', '热榜', '发现', '视频', '关注', '推荐', '热榜', '发现', '视频'];
            this.items2 = ['今日新闻', '军事政治', '天文地理天气'];
        },
        methods: {
            myClick(e) {
                console.log("当前点击的下标为：" + e.index, "标签为：" + e.item);
                uni.showToast({
                    title: e.item,
                    duration: 1500,
                    icon: 'none'
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        box-sizing: border-box;
        min-height: 100vh;
        min-width: 100vw;
    }

    .t-demo-title {
        padding-left: 30rpx;
        font-size: 36rpx;
        color: #333;
        line-height: 45rpx;
        margin: 50rpx 0rpx 10rpx;
    }

</style>