selectediconpath的用途和处理

在编写应用程序时，一个页面可能会有很多个选项卡，每个选项卡都需要显示对应的图标。这时，我们可以使用selectediconpath属性来设置选中状态的图标路径。这个属性的设置非常灵活，可以根据需求来处理。下面，我们将从不同的方面来详细阐述selectediconpath的用途和处理方法。

一、设置selectediconpath的正常方法

一般情况下，在应用程序中使用selectediconpath属性时，我们需要像下面这样设置：

wx.setTabBarItem({
  index: 0,
  selectedIconPath: 'tabbar/icon1-on.png'
})

其中，index表示需要设置的选项卡的下标，selectedIconPath表示选中状态的图标路径。可以看出，这种设置方法非常简单明了。

二、设置selectediconpath的不同方式

除了上述正常方法外，我们还可以通过以下方式来设置selectediconpath属性：

1、使用数组设置

wx.setTabBarItem({
  index: 0,
  iconPath: ['tabbar/icon1-off.png', 'tabbar/icon1-on.png']
})

2、使用对象设置

wx.setTabBarItem({
  index: 0,
  iconPath: {
    selected: 'tabbar/icon1-on.png',
    unselected: 'tabbar/icon1-off.png'
  }
})

这两种设置方式虽然略显复杂，但也更加灵活，可以根据需求来选择使用哪种方式。

三、处理selectediconpath图标状态

在实际开发中，我们可能需要根据不同的事件来处理选项卡的selectediconpath图标状态。比如，在用户点击某个选项卡时，需要将其它选项卡的selectediconpath状态设为未选中。

下面是一个设置选项卡selectediconpath状态的示例：

Page({
  data: {
    tabList: [{
      iconPath: '/images/tab1-icon.png',
      selectedIconPath: '/images/tab1-icon-selected.png'
    }, {
      iconPath: '/images/tab2-icon.png',
      selectedIconPath: '/images/tab2-icon-selected.png'
    }, {
      iconPath: '/images/tab3-icon.png',
      selectedIconPath: '/images/tab3-icon-selected.png'
    }]
  },
  onTapTab: function(e) {
    var index = e.currentTarget.dataset.index;
    var tabList = this.data.tabList;
    for (var i = 0, len = tabList.length; i < len; i++) {
      var tab = tabList[i];
      if (i == index) {
        tab.selected = true;
      } else {
        tab.selected = false;
      }
    }
    this.setData({
      tabList: tabList
    })
  }
})

通过这段代码，当用户点击某个选项卡时，该选项卡的selectediconpath图标将变为选中状态，其它选项卡的selectediconpath图标则会变为未选中状态。这个方法可以在许多应用程序中使用。

四、注意事项

在使用selectediconpath属性时，需要注意以下几点：

1、绝对路径和相对路径都可以使用，但建议使用相对路径，这样可以保证代码的可移植性。

2、建议使用png格式的图片作为selectediconpath，这样可以保证图片质量。

3、在设置selectediconpath时，需要与iconpath配合使用，否则选项卡会没有图标。

4、通过selectediconpath设置的图标必须与iconpath设置的图标尺寸一致，否则会出现图标错位的问题。