94 lines
1.7 KiB
TypeScript
94 lines
1.7 KiB
TypeScript
// components/custom-tabbar/index.ts
|
|
Component<TabBarData, TabBarProperties, TabBarMethods>({
|
|
properties: {
|
|
// 定义组件外部传入的属性
|
|
cartCount: {
|
|
type: Number,
|
|
value: 0,
|
|
},
|
|
},
|
|
|
|
data: {
|
|
list: [
|
|
{
|
|
pagePath: "/pages/home/index",
|
|
iconPath: "home-o",
|
|
text: "首页",
|
|
},
|
|
{
|
|
pagePath: "/pages/category/index",
|
|
iconPath: "apps-o",
|
|
text: "分类",
|
|
},
|
|
{
|
|
pagePath: "/pages/shopping-cart/index",
|
|
iconPath: "shopping-cart-o",
|
|
text: "购物车",
|
|
badge: 3,
|
|
},
|
|
{
|
|
pagePath: "/pages/mine/index",
|
|
iconPath: "friends-o",
|
|
text: "我的",
|
|
},
|
|
] as TabBarItem[],
|
|
active: 0,
|
|
},
|
|
|
|
methods: {
|
|
switchTab(e: WechatMiniprogram.TouchEvent) {
|
|
const { path } = e.currentTarget.dataset as {
|
|
path: string;
|
|
};
|
|
wx.switchTab({ url: path });
|
|
},
|
|
},
|
|
});
|
|
|
|
// 类型定义
|
|
type TabBarItem = {
|
|
pagePath: string;
|
|
iconPath: string;
|
|
selectedIconPath: string;
|
|
text: string;
|
|
badge?: number;
|
|
};
|
|
|
|
// 组件配置
|
|
interface CustomTabBar {
|
|
properties: {
|
|
cartCount: {
|
|
type: NumberConstructor;
|
|
value: number;
|
|
};
|
|
};
|
|
data: {
|
|
list: TabBarItem[];
|
|
active: number;
|
|
};
|
|
methods: {
|
|
switchTab: (e: WechatMiniprogram.TouchEvent) => void;
|
|
};
|
|
}
|
|
|
|
interface TabBarData {
|
|
list: Array<{
|
|
pagePath: string;
|
|
iconPath: string;
|
|
selectedIconPath: string;
|
|
text: string;
|
|
badge?: number;
|
|
}>;
|
|
active: number;
|
|
}
|
|
|
|
interface TabBarProperties {
|
|
cartCount: any;
|
|
[key: string]: any;
|
|
}
|
|
|
|
interface TabBarMethods {
|
|
switchTab: (e: WechatMiniprogram.TouchEvent) => void;
|
|
[key: string]: (...args: any[]) => any;
|
|
}
|