更新记录

1.0.3(2025-04-25) 下载此版本

1.增加左侧区域自定义样式参数 2.增加左侧区域事件暴露

1.0.2(2025-04-10) 下载此版本

更改标题

1.0.1(2025-04-10) 下载此版本

删除沉冗代码

查看更多

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
× - - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - -

其他

多语言 暗黑模式 宽屏模式
× ×

sk-linkage-menu

代码演示

微信截图_20250403111810.png

基础使用

复制代码<template>
    <view>
        <sk-linkage-menu :list="state.test" :height="500">
            <template v-slot="{data}">
                <view>
                    <view class="class-item">
                        <view class="thumb-box item-food">
                            <view class="left-info">
                                <image :src="data.image" class="item-image"></image>
                            </view>
                            <view class="right-info">
                                <view class="goods-title"> {{ data.name }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </template>
        </sk-linkage-menu>
    </view>
</template>
复制代码<script lang="ts">
    import { onMounted, reactive } from 'vue'
    type stateType = {
        test : any
    }
    export default{
        setup(props) {
            const state = reactive<stateType>({
                test: [],
            })

            onMounted(() => {
                for (let index = 0; index < 100; index++) {
                    state.test.push({
                        name: `${index}号`,
                        data: [
                            {
                                classify: `${index}号2`,
                                lazyLoad: false,
                                defaut: '/static/image/commer/defaut.png',
                                id: index,
                            },
                            {
                                classify: `${index}号`,
                                lazyLoad: false,
                                defaut: '/static/image/commer/defaut.png',
                                id: index,
                            },
                        ],
                    })
                }
            })
            return {
                state,
            }
        },
    }
</script>

API 参考

Props

属性名 类型 默认值 说明
virtualMenuHeight Number uni.getSystemInfoSync().windowHeight - 44 组件高度
list MenuDataItem[] 右侧滚动内容列表
itemHeight Number 130 每一项的高度
leftBarStyle Object 左侧未选中菜单样式
leftBarUnStyle Object 左侧已选中菜单样式

Methods

属性名 类型 说明
change Functuon 左侧选中的回调,参数是点击当前项的数据

MenuDataItem类型

属性名 类型 默认值 说明
name String 左侧菜单名称,必传不能为空
data Array 右侧滚动内容列表
id number 菜单id,必传不能为空

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议
143***@qq.com

2025-04-21

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问