youzan / vant-weapp

轻量、可靠的小程序 UI 组件库
https://vant.pro/vant-weapp/
MIT License
17.78k stars 3.48k forks source link

[Bug Report] Tabbar组件加了url属性没反应 #5484

Closed Pentium286 closed 1 year ago

Pentium286 commented 1 year ago

重现链接

import Taro from '@tarojs/taro';
import { useState } from 'react';
import './index.less';

const switchTab = "switchTab";
const list = [
  {
    pagePath: '/pages/main/index',
    text: '首页',
    iconPath: 'https://img.yzcdn.cn/vant/user-inactive.png',
    selectedIconPath: 'https://img.yzcdn.cn/vant/user-active.png',
  },
  {
    pagePath: '/pages/index/index',
    text: '',
    iconPath: 'https://img.yzcdn.cn/vant/user-inactive.png',
    selectedIconPath: '../assets/images/tabs/tabCode.png',
  },
  {
    pagePath: '/pages/mine/index',
    text: '我的',
    iconPath: 'https://img.yzcdn.cn/vant/user-inactive.png',
    selectedIconPath: '../assets/images/tabs/userActive@2x.png',
  },
];

const CustomTabbar = () => {
  const [active, setActive] = useState(0);

  const onChange = (event) => {
    Taro.switchTab({
      url: event.detail,
    });
  };

  return (
    <van-tabbar active={active} onChange={onChange}>
      {
        list.map((item, index) => {

          return (
            <van-tabbar-item
              url={item.pagePath}
              link-type={switchTab}
              name={item.pagePath}
              info={1}
            >
              <image
                slot="icon"
                src={item.iconPath}
                mode="aspectFit"
                style="width: 30px; height: 18px;"
              />
              <image
                slot="icon-active"
                src={item.selectedIconPath}
                mode="aspectFit"
                style="width: 30px; height: 18px;"
              />
              {item.text}
            </van-tabbar-item>
            // <div key={index} className='tab-bar-item' onClick={switchTo(item.pagePath)}>
            //   <img src={isSelected ? item.selectedIconPath : item.iconPath} />
            //   <div style={{ color: isSelected ? selectedColor : color }}>{item.text}</div>
            // </div>
          );
        })
      }
    </van-tabbar>
  );
};

export default CustomTabbar;

Vant Weapp 版本

1.10.20

描述一下你遇到的问题。

van-tabbar-item 添加了 url、link-type 属性无法实现功能

重现步骤

加载页面

设备/浏览器

No response

johnsonwong666 commented 1 year ago

目前不处理非原生小程序开发平台产生的问题,可能是taro编译导致的问题,请到对应仓库下提起issue.