更新记录
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
代码演示
基础使用
复制代码<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,必传不能为空 |