电梯导航、联动菜单 Elevator

• 一个左右联动的电梯导航、联动菜单组件模板。
• 由于这类组件个性化较高，因此此组件只作为一个模板，提供的对应的功能和基础样式，你可以根据自己的需求进行修改。

提示

演示页面使用的 iframe，可能不支持触摸滚动，可以用滚轮滚动

插件市场地址

https://ext.dcloud.net.cn/plugin?name=pure-elevator

基础使用

• 对应组件包中 pure-elevator.vue 文件
• 只定义了 list 和 current 两个属性，你可以根据自己的需求进行修改
• list：列表数据
• current：激活项下标

<template>
	<view class="content">
		<pure-elevator :list="list" :current="current"></pure-elevator>
	</view>
</template>

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

// 数据
const list = ref([]);
const current = ref(0);

// 初始化数据
onReady(() => {
	initList();
});

// 初始化数据
function initList() {
	const _list = [
		{
			id: 1,
			name: "手机数码",
			products: [
				{ id: 1, name: "iPhone 14 Pro Max" },
				{ id: 2, name: "华为 Mate 50" },
				{ id: 3, name: "小米 13 Ultra" },
				{ id: 4, name: "OPPO Find X6" },
				{ id: 5, name: "vivo X90 Pro" },
				{ id: 6, name: "三星 Galaxy S23" },
				{ id: 7, name: "一加 11" },
				{ id: 8, name: "荣耀 Magic5" },
				{ id: 9, name: "红米 K60" },
				{ id: 10, name: "realme GT Neo5" },
				{ id: 11, name: "魅族 20" },
				{ id: 12, name: "努比亚 Z50" },
				{ id: 13, name: "索尼 Xperia 1 V" },
				{ id: 14, name: "黑鲨 5 Pro" },
				{ id: 15, name: "联想拯救者 Y90" },
				{ id: 16, name: "华硕 ROG Phone 6" },
				{ id: 17, name: "Google Pixel 7" },
				{ id: 18, name: "诺基亚 X30" },
				{ id: 19, name: "摩托罗拉 Edge 40" },
				{ id: 20, name: "中兴 Axon 40 Ultra" }
			]
		}
        // ...
	];
	list.value = _list;
}
</script>

子选项卡

• 对应组件包中 pure-elevator-sub-tabs.vue 文件
• 只定义了 list current 和 subCurrent 三个属性，你可以根据自己的需求进行修改
• list：列表数据
• current：激活项下标
• subCurrent：子选项卡激活项下标

<template>
	<view class="content">
		<a-demo title="子选项卡">
			<pure-elevator-sub-tabs :list="list" :current="current" :subCurrent="subCurrent"></pure-elevator-sub-tabs>
		</a-demo>
	</view>
</template>

<script setup>
import pureElevatorSubTabs from "@/uni_modules/pure-elevator/components/pure-elevator/pure-elevator-sub-tabs.vue"
import { ref } from "vue";
import { onReady } from "@dcloudio/uni-app";

// 数据
const list = ref([]);
const current = ref(0);
const subCurrent = ref(4)

// 初始化数据
onReady(() => {
	initList();
});

// 初始化数据
function initList() {
	const _list = [];
	for (let i = 0; i < 20; i++) {
		const item = {
			id: i,
			name: "分类" + i,
			products: []
		}
		const jLength = i % 2 === 0 ? 10 : 8;
		for (let j = 0; j < jLength; j++) {
			const product = {
				id: j,
				name: "分类" + i + "_子类" + j,
				children: []
			}
			for (let k = 0; k < 10; k++) {
				const child = {
					id: k,
					name: "分类" + i + "_子类" + j + "_商品" + k
				}
				product.children.push(child);
			}
			item.products.push(product);
		}
		_list.push(item);
	}
	list.value = _list;
}
</script>

Props

属性名	说明	类型	默认值	可选值	版本
list	数据列表	Array	[]	-	+1.0.0
current	激活项下标	Number	0	-	+1.0.0
subCurrent	子选项卡激活项下标	Number	0	-	+1.0.0

Event

事件名	说明	回调参数	版本
change	左侧选项卡切换事件	current: 左侧选项卡当前激活项下标	1.0.0
subCurrent	子选项卡切换事件	subCurrent: 子选项卡当前激活项下标; current: 左侧选项卡当前激活项下标	1.0.0