Fusions

Appearance

VTabs 垂直选项卡 ​

iPhone

此组件一般场景用于分类展示和联动等功能。

平台差异说明 ​

APPH5微信小程序支付宝小程序QQ小程序···
√√√√√适配中

代码示例 ​

部分功能示例，具体可参考示例程序以及文档API。

基础用法 ​

  • 通过 chain 属性设置为 true 可以实现选项卡联动，右侧区域展示全部内容，并且滚动时左侧选项自动定位选中项
  • 此用法需要结合 vtabs-item 组件使用，需要将内容部分循环渲染，才能达到联动效果
  • 如果需要在头部额外添加内容，hdHeight 属性必传，否则会导致联动时计算不准确，导致选项卡位置错位，如果不需要额外内容，可不传此属性值， 默认为 0
html
<template>
    <view class="vtabs-wrap">
        <view class="vtabs-wrap__header">
            <text class="vtabs-wrap__header--text">欢迎使用fu-vtabs组件，这是头部内容，有头部内容必须传hdHeight参数</text>
        </view>
        <fu-vtabs
            :chain="chain"
            :list="list"
            :height="customHeight"
            hdHeight="100rpx"
            @change="change">
            <template v-for="(item,index) in list" :key="index">
                <fu-vtabs-item :index="index">
                    <view class="vtabs-wrap__item" v-for="(item2,index2) in item.childrens" :key="index2">
                        <view class="vtabs-wrap__item--title">
                            <text>{{ item2.name }}</text>
                        </view>
                        <view class="vtabs-wrap__item--content">
                            <text>{{ item2.desc }}</text>
                        </view>
                    </view>
                    <view class="vtabs-wrap__grey fu-h-16" v-if="index < list.length - 1"></view>
                </fu-vtabs-item>
            </template>
            <view style="height: 500px;"></view>
        </fu-vtabs>
    </view>
</template>

<script setup>
    import { ref, computed } from 'vue';
    import { onReady } from '@dcloudio/uni-app';

    // data数据
    let list = ref([]);
    let chain = ref(true);
    let value = ref(0);
    const getList = [{
        name: 'uni-app简介',
        childrens: [{
            name: 'uni-app简介',
            desc: 'uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。'
        }]
    }, {
        name: 'uni-app特点',
        childrens: [{
            name: '跨平台兼容性',
            desc: '一套代码可编译生成安卓、iOS、网页、多种小程序（如微信、抖音）等，实现一次开发多端运行。'
        }, {
            name: '开发速度快',
            desc: '借助 HBuilderX IDE，编译和构建速度快，支持快速迭代和调试。'
        }, {
            name: '成本效益高',
            desc: '大幅减少多平台重复开发，缩短上线时间，降低开发资源消耗。'
        }]
    }, {
        name: '更新日志',
        badge: {
            show: true,
            value: 6
        },
        childrens: [{
            name: '更新日志',
            desc: 'fusions-ui每次重大迭代中再更新日志中都有说明，但技术探索永无止境————若您再开发过程中发现文档存在疏漏或需要更详尽的说明，请提供给我们，您的声音将直接推动Fusions-UI文档体系的进化，让我们共同打造更流畅的开发体验。谨此感谢所有开发者的信任与支持，每一次issue提交、每一份PR都是对开源社区最珍贵的贡献，与您携手构建更强大的前端工具链'
        }]
    }, {
        name: '设计规范',
        childrens: [{
            name: '设计规范',
            desc: '通过模块化组件，构建高复用、低沉余的体系，打造优质的体验，部分之间会有依赖，为了减少代码冗余的同时提高开发效率，模块化是我们的基础。如果大家有好的建议，可以提出进行改进。'
        }]
    }, {
        name: '交流反馈',
        childrens: [{
            name: '交流反馈',
            desc: 'fusions-ui遵循MIT开源协议，意味着您无需任何费用，同时也无需授权，将fusions-ui应用到您的产品中；欢迎加QQ群交流反馈，一起学习，共同进步。QQ群： 712627377'
        }]
    }];

    onReady(() => {
        // 模拟接口请求数据
        uni.showLoading({
            title: '加载中'
        })
        setTimeout(() => {
            list.value = getList;
            uni.hideLoading();
        }, 500)
    });

    // computed计算属性
    const customHeight = computed(() => uni.$fu.sys().windowHeight - uni.upx2px(100));
    const list2 = computed(() => {
        const newList = list.value[value.value]?.childrens;
        return newList? newList: [];
    })

    // methods方法
    const change = (index) => {
        console.log('选项改变：',index)
        value.value = index;
    }
</script>

<style lang="csss" scoped>
    .vtabs-wrap {

        &__header {
            height: 100rpx;
            font-size: 30rpx;
            background: #dee6ef;
            color: #999999;
            padding: 0 30rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;

            &--text {
                font-size: 28rpx;
            }
        }

        &__item {
            padding: 10rpx 20rpx;

            &--title {
                font-weight: 700;
                font-size: 32rpx;
                color: #000000;
            }

            &--content {
                padding: 20rpx 0;
                line-height: 48rpx;
                font-size: 28rpx;
                color: #222222;
                /* #ifndef APP-NVUE */
                word-break: break-all;
                /* #endif */
            }
        }

        &__grey {
            background-color: #F5F5F5;
        }
    }
</style>

设置不联动 ​

  • 通过 chain 属性设置为 false 可以实现选项卡不联动，右侧区域展示当前所选中项内容，并且滚动时左侧选项不自动定位选中项
  • 此用法需要结合 vtabs-item 组件使用，需要手动处理右侧渲染的数据
html
<template>
    <view class="vtabs-wrap">
        <fu-vtabs
            :chain="chain"
            :list="list"
            :height="customHeight"
            hdHeight="100rpx"
            @change="change">
            <template v-for="(item,index) in list" :key="index">
                <fu-vtabs-item :index="index">
                    <view class="vtabs-wrap__item" v-for="(item2,index2) in item.childrens" :key="index2">
                        <view class="vtabs-wrap__item--title">
                            <text>{{ item2.name }}</text>
                        </view>
                        <view class="vtabs-wrap__item--content">
                            <text>{{ item2.desc }}</text>
                        </view>
                    </view>
                    <view class="vtabs-wrap__grey fu-h-16" v-if="index < list.length - 1"></view>
                </fu-vtabs-item>
            </template>
            <view style="height: 500px;"></view>
        </fu-vtabs>
    </view>
</template>

<script setup>
    import { ref, computed } from 'vue';
    import { onReady } from '@dcloudio/uni-app';

    // data数据
    let list = ref([]);
    let chain = ref(false);
    let value = ref(0);
    const getList = [{
        name: 'uni-app简介',
        childrens: [{
            name: 'uni-app简介',
            desc: 'uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。'
        }]
    }, {
        name: 'uni-app特点',
        childrens: [{
            name: '跨平台兼容性',
            desc: '一套代码可编译生成安卓、iOS、网页、多种小程序（如微信、抖音）等，实现一次开发多端运行。'
        }, {
            name: '开发速度快',
            desc: '借助 HBuilderX IDE，编译和构建速度快，支持快速迭代和调试。'
        }, {
            name: '成本效益高',
            desc: '大幅减少多平台重复开发，缩短上线时间，降低开发资源消耗。'
        }]
    }, {
        name: '更新日志',
        badge: {
            show: true,
            value: 6
        },
        childrens: [{
            name: '更新日志',
            desc: 'fusions-ui每次重大迭代中再更新日志中都有说明，但技术探索永无止境————若您再开发过程中发现文档存在疏漏或需要更详尽的说明，请提供给我们，您的声音将直接推动Fusions-UI文档体系的进化，让我们共同打造更流畅的开发体验。谨此感谢所有开发者的信任与支持，每一次issue提交、每一份PR都是对开源社区最珍贵的贡献，与您携手构建更强大的前端工具链'
        }]
    }, {
        name: '设计规范',
        childrens: [{
            name: '设计规范',
            desc: '通过模块化组件，构建高复用、低沉余的体系，打造优质的体验，部分之间会有依赖，为了减少代码冗余的同时提高开发效率，模块化是我们的基础。如果大家有好的建议，可以提出进行改进。'
        }]
    }, {
        name: '交流反馈',
        childrens: [{
            name: '交流反馈',
            desc: 'fusions-ui遵循MIT开源协议，意味着您无需任何费用，同时也无需授权，将fusions-ui应用到您的产品中；欢迎加QQ群交流反馈，一起学习，共同进步。QQ群： 712627377'
        }]
    }];

    onReady(() => {
        // 模拟接口请求数据
        uni.showLoading({
            title: '加载中'
        })
        setTimeout(() => {
            list.value = getList;
            uni.hideLoading();
        }, 500)
    });

    // computed计算属性
    const customHeight = computed(() => uni.$fu.sys().windowHeight - uni.upx2px(100));
    const list2 = computed(() => {
        const newList = list.value[value.value]?.childrens;
        return newList? newList: [];
    })

    // methods方法
    const change = (index) => {
        console.log('选项改变：',index)
        value.value = index;
    }
</script>

<style lang="csss" scoped>
    .vtabs-wrap {

        &__item {
            padding: 10rpx 20rpx;

            &--title {
                font-weight: 700;
                font-size: 32rpx;
                color: #000000;
            }

            &--content {
                padding: 20rpx 0;
                line-height: 48rpx;
                font-size: 28rpx;
                color: #222222;
                /* #ifndef APP-NVUE */
                word-break: break-all;
                /* #endif */
            }
        }

        &__grey {
            background-color: #F5F5F5;
        }
    }
</style>

API ​

VTabs Props ​

属性名说明类型默认值可选值
list选项数组，元素为对象，如[{name:'fusions-ui介绍'}]Array[]-
keyName从list元素对象中读取的键名Stringname-
current当前选中项，从0开始Number0-
hdHeight头部额外内容高度，头部有内容必传，否则会有联动误差String｜Number0-
chain是否开启联动，开启后右侧区域可以滑动查看内容，并且左侧选项自动定位选中项，注意：chain 属性为 true 时 vtabs-item 的 index 属性必传，详见上方基础用法Booleantruefalse
height整个列表的高度，默认auto或空则为屏幕高度String｜Numberauto屏幕高度uni.$fu.sys().windowHeight
barWidth左侧选项区域的宽度String｜Number180rpx-
barScrollable左侧选项区域是否允许滚动Booleantruefalse
barBgColor左侧选项区域的背景色String--
barStyle左侧选项区域的自定义样式String｜Object--
barItemStyle左侧选项区域每个选项的自定义样式String｜Object--
barItemActiveStyle左侧选项区域选中选项的自定义样式String｜Object--
barItemActiveLineStyle左侧选项区域选中项底部横线的自定义样式String｜Object--
barItemBadgeStyle左侧选项区域选中选项徽标的自定义样式，主要用于设置位置及样式，详见上方设置不联动String｜Object--
contentStyle右侧区域自定义样式String｜Object--

VTabs Events ​

事件名说明回调参数
change选项改变时触发() => void
scrolltolower内容滚动到底部触发() => void

VTabsItem Props ​

属性名说明类型默认值可选值
index内容区索引值，chain 属性为 true 时必传String｜Number0-