Skip to content

SliderMenu 侧边分类

创建一个可滑动的侧边菜单,支持配置菜单类型、菜单类名等

支持平台

安卓iosweb微信小程序支付宝小程序QQ小程序
xxx

示例

vue
<template>
	<t-page :bounces="false" title='侧边分类'>
		<t-section class='tdr-tdb-mltr.30-tdr' sub-title='布局灵活,需传入list数组,适配任何数据格式,组件内部使用list-view内存回收无需担心数据太多的性能问题'
			type='error'></t-section>
		<t-slider-menu class="h.500-m.30-tdr">
			<t-slider-menu-item v-for="(item,index) in list" :key="index">
				<template v-slot:menu>
					<t-row class='plr.15-ptb.25-fc'>
						<t-text>{{item.title}}</t-text>
					</t-row>
				</template>
				<t-col class="tdb-p.20">
					<t-text class="mb.20" style="font-weight: 700;">{{item.title}}</t-text>
					<t-row v-for="(itemL,_) in item.data" :key="itemL.goods_id">
						<t-image :src="itemL.goods_img" class='w.120-h.120-mr.10'></t-image>
						<t-col class="ff">
							<t-text>{{itemL.goods_name}}</t-text>
							<t-text type="error" class="slh.40">{{itemL.shop_price}}</t-text>
						</t-col>
					</t-row>
				</t-col>
				<t-row class="h.20"></t-row>
			</t-slider-menu-item>
		</t-slider-menu>
	</t-page>
</template>

<script>
	type TypeSlidetMenuList = {
		title : string
		id : string
		data : goodsType[]
	}
	type goodsType = {
		goods_name : string,
		shop_price : string,
		goods_id : number,
		goods_img : string
		sortKey : string
	}
	import { TuiApi } from '@/api/uriApi.uts'
	export default {
		data() {
			return {
				list: [] as TypeSlidetMenuList[],
				goods: [] as goodsType[]
			};
		},
		onLoad() {
			TuiApi('getSidebarMenulist').then(res => {
				this.list = JSON.parse<TypeSlidetMenuList[]>(JSON.stringify((res as UTSJSONObject).get('data'))) as TypeSlidetMenuList[]
			})
		}
	}
</script>

Props

名称描述类型默认值
----

Events

事件名描述回调参数
---

Slots

名称描述
--

Methods

方法名描述参数
---