微信小程序 自定义tab组件怎么实现获取当前url并根据url使用不同的样式

微信小程序中自定义Tab组件通常用于导航栏，你可以通过`onLoad`生命周期函数以及`getCurrentPages()`方法来获取当前页面的路径，并根据路径动态设置样式。以下是一个简单的步骤：

1. 定义Tab组件：

<view class="custom-tab">
  <navigator bindtap="switchPage" :url="{{currentUrl}}" current="{{currentIndex}}"></navigator>
  <!-- 其他 tab 子项，比如 <button>标签 -->
</view>

2. 使用JS部分处理：

Component({
  /**
   * 页面的初始数据
   */
  data: {
    currentUrl: '',
    currentIndex: 0,
    styles: { // 根据不同的URL准备不同的样式对象
      activeStyle: {} // 当前选中状态的样式
    }
  },
  
  onLoad: function() {
    this.getCurrentPages(); // 获取所有页面列表
    const currentPage = this.data.pages[this.data.currentIndex]; // 获取当前页
    if (currentPage) {
      this.currentUrl = currentPage.path; // 设置当前URL
      this.setActiveStyle(this.currentUrl); // 设置对应样式的CSS
    }
  },
  
  switchPage(e) {
    this.setData({
      currentIndex: e.toIndex, // 更新选中索引
      currentUrl: e.toUrl, // 更新URL
    });
  },
  
  setActiveStyle(url) {
    // 根据url匹配不同的样式规则，例如：
    if (url === '/page1') {
      this.setData({activeStyle: {color: '#fff', background: '#ff6600'}});
    } else if (url === '/page2') {
      this.setData({activeStyle: {color: '#0099ff', background: '#e6f7ff'}});
    }
    // 更多样式规则...
  }
})

在这个例子中，当用户点击导航按钮时，会触发`switchPage`方法，更新当前的`currentIndex`和`currentUrl`。然后`setActiveStyle`方法会根据新的URL来设置对应的样式。