面板小程序tabbar图标不显示

小程序开发相关产品技术讨论,包括面板、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具(IDE)及其他开发技术相关等话题


Post Reply
bibaoy
Posts: 2

export const tabBar: TabBar = {
borderStyle: "white",
textColor: "#000",
selectedColor: "#fa5500",
list: [
{
// id: "home",
route: "/",
text: "Home",
icon: "/src/res/image/coldopen1.png",
activeIcon: "/src/res/image/coldopen.png",
pagePath: "/pages/home/index",
},
{
route: "/history",
text: "Setting",
icon: "/src/res/image/hotopen1.png",
activeIcon: "/src/res/image/hotopen.png",
pagePath: "/pages/history/index",
},
],
};


Tags:
muhai
Posts: 81

Re: 面板小程序tabbar图标不显示

图标放的路径不对。icon和activeIcon图标必须放在public/images目录下,activeIcon引用的路径是"/images/hotopen.png",例如

Code: Select all

export const tabBar: TabBar = {
  borderStyle: 'white',
  textColor: '#000',
  selectedColor: '#fa5500',
  list: [
    {
      route: '/',
      text: 'Home',
      icon: '/images/icon_back.png', // 必须为 /images 开头,图片放在 /public/images目录下
      activeIcon: '/images/icon_back.png', // 必须为 /images 开头,图片放在 /public/images目录下
      pagePath: '/pages/Home/index',
    },
    {
      route: '/history',
      text: 'Setting',
      icon: '/images/icon_back.png', // 必须为 /images 开头,图片放在 /public/images目录下
      activeIcon: '/images/icon_back.png', // 必须为 /images 开头,图片放在 /public/images目录下
      pagePath: '/pages/history/index',
    },
  ],
};

图片放在 根目录下 public目录中

截屏2024-10-30 14.15.06.png
bibaoy
Posts: 2

Re: 面板小程序tabbar图标不显示

ok,可以了,感谢!

Post Reply