更新记录

3.0.2（2024-08-05） 下载此版本

innovueui-tab 电商导航菜单

3.0.1（2024-08-05） 下载此版本

3.0.0（2024-08-05）

innovueui-tab 电商导航菜单 3.0.0

2.0.0（2024-08-05）

innovueui-tab 电商导航菜单 2.0.0

3.0.0（2024-08-05） 下载此版本

innovueui-tab 电商导航菜单 3.0.0

平台兼容性

uni-app

uni-app x

henianheyue-tab组件

1.导入项目

2.在页面中直接使用 henianheyue-tab

index.vue 入口文件使用 uni_modules目录 vue组件说明

<template>
    <view class="center-cut-menu">
        <henianheyue-tab></henianheyue-tab>
    </view>
</template>

uni_modules 组件简单介绍

只要组件安装在项目 uni_modules 目录下，并符合 components/组件名称/组件名称.vue 目录结构。就可以不用导入、注册，直接在页面中使用，去除传统的 Vue 组件使用方式。

index.vue 入口文件使用 components目录 vue组件说明

导入组件并注册

<template>
    <view class="center-cut-menu">
        <tab></tab>
    </view>
</template>

<script>
    import tab from '../../components/henianheyue-tab/henianheyue-tab.vue'

    export default {
    components: {
            tab,
    },
    data() {
    return {
        screenWidth: uni.getSystemInfoSync().screenWidth, // 屏幕宽
        screenHeight: uni.getSystemInfoSync().screenHeight, // 屏幕高

    };
  },
  created() {

  },
  onLoad() {

  },
  methods: {
     init() {

     }, 
  }
};
</script>

<style>
</style>

uni_modules 目录下 henianheyue-tab.vue 组件代码

<template>
    <view class="center-cut-menu">
        <scroll-view scroll-x="true" 
            scroll-with-animation="true" class="scroll-view" :scroll-left="scrollLeft">
            <view class="scroll-item" 
                    v-for="(item, index) in list" :key="index" 
                    @click="changeMenu(index)">
                    <text class="item-text" 
                        :class="curIndex == index? 'active' : ''">
                        {{item.name}}
                    </text>
            </view> 
        </scroll-view>

        <view class="content" v-if="curIndex===index" v-for="(item, index) in list"
            :style="{'height':(screenHeight-44-55)+'px'}">{{item.content}}
        </view> 

    </view>
</template>

<script>
    javascript部分省略... 请下载源码
</script>

<style lang="scss">
    .center-cut-menu {
        width: 100%;
        height: 100rpx;
        box-sizing: border-box;

        .scroll-view {
            height: 100rpx;
            white-space: nowrap;

            .scroll-item {
                height: 100rpx;
                padding: 0 20rpx;
                display: inline-block;
                text-align: center;

                .item-text {
                    font-size: 30rpx;
                    line-height: 100rpx;

                    &.active {
                        color: #1468FF;
                    }
                }
            }
        }
    }
    .active:before
    { 

        content:"";
        background-color:1468FF;
        color:#1468FF;
        font-weight:bold;
        position: absolute;
        bottom: 8px;
        margin-left: -0px;
        border-radius: 0px;
        width:28px;
        height:2px;
        border-bottom: 2.8px solid #1468FF;
    }
    .content{
        width:100%;
        height:100px;
        background-color: #09BE4F;color:#fff;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center111;     /* 垂直居中 */
    }
</style>

数据说明

list数组数据为测试数据，请自行根据需要修改。