100 lines
2.1 KiB
TypeScript
100 lines
2.1 KiB
TypeScript
// components/custom-tabbar/index.ts
|
|
Component<TabBarData, TabBarProperties, TabBarMethods>({
|
|
properties: {
|
|
// 定义组件外部传入的属性
|
|
cartCount: {
|
|
type: Number,
|
|
value: 0,
|
|
},
|
|
},
|
|
|
|
data: {
|
|
list: [
|
|
{
|
|
pagePath: "/pages/home/index",
|
|
// iconPath: "/images/tab/home.png",
|
|
// selectedIconPath: "/images/tab/home-active.png",
|
|
text: "首页",
|
|
},
|
|
{
|
|
pagePath: "/pages/category/category",
|
|
// iconPath: "/images/tab/category.png",
|
|
// selectedIconPath: "/images/tab/category-active.png",
|
|
text: "分类",
|
|
},
|
|
{
|
|
pagePath: "/pages/cart/cart",
|
|
// iconPath: "/images/tab/cart.png",
|
|
// selectedIconPath: "/images/tab/cart-active.png",
|
|
text: "购物车",
|
|
badge: 3,
|
|
},
|
|
{
|
|
pagePath: "/pages/user/user",
|
|
// iconPath: "/images/tab/user.png",
|
|
// selectedIconPath: "/images/tab/user-active.png",
|
|
text: "我的",
|
|
},
|
|
] as TabBarItem[],
|
|
active: 0,
|
|
},
|
|
|
|
methods: {
|
|
switchTab(e: WechatMiniprogram.TouchEvent) {
|
|
const { path, index } = e.currentTarget.dataset as {
|
|
path: string;
|
|
index: number;
|
|
};
|
|
this.setData({ active: index });
|
|
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;
|
|
}
|