SliderMenu 侧边分类
创建一个可滑动的侧边菜单,支持配置菜单类型、菜单类名等
支持平台
安卓 | ios | web | 微信小程序 | 支付宝小程序 | QQ小程序 |
---|---|---|---|---|---|
√ | √ | √ | x | x | x |
示例
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
方法名 | 描述 | 参数 |
---|---|---|
- | - | - |