<view class="container"> <!-- 图标切换 --> <view class="tab-bar"> <view class="tab-item" bindtap="switchTab" data-index="0"> <image src="/images/schedule.png" mode="aspectFit"></image> <text>赛程</text> </view> <view class="tab-item" bindtap="switchTab" data-index="1"> <image src="/images/team.png" mode="aspectFit"></image> <text>战队</text> </view> <view class="tab-item" bindtap="switchTab" data-index="2"> <image src="/images/player.png" mode="aspectFit"></image> <text>选手</text> </view> </view> <!-- 数据列表 --> <view class="list-container"> <block wx:if="{{currentTab === 0}}"> <view class="list-item" wx:for="{{schedules}}" wx:key="id"> <text>{{item.name}}</text> </view> </block> <block wx:if="{{currentTab === 1}}"> <view class="list-item" wx:for="{{teams}}" wx:key="id"> <text>{{item.name}}</text> </view> </block> <block wx:if="{{currentTab === 2}}"> <view class="list-item" wx:for="{{players}}" wx:key="id"> <text>{{item.name}}</text> </view> </block> </view> </view>修改上述代码要求按下图标后变成对应的激活图标，比如按下eventData后图标变成eventData-a表示确定被选中

为了实现按下图标后变成对应的激活图标，我们可以通过动态绑定`src`属性来切换图片。以下是修改后的代码： ### 修改后的 `index.wxml` 文件 ```html <view class="container"> <!-- 图标切换 --> <view class="tab-bar"> <view class="tab-item" bindtap="switchTab" data-index="0" data-type="schedule"> <image src="{{currentTab === 0 ? '/images/schedule-a.png' : '/images/schedule.png'}}" mode="aspectFit"></image> <text>赛程</text> </view> <view class="tab-item" bindtap="switchTab" data-index="1" data-type="team"> <image src="{{currentTab === 1 ? '/images/team-a.png' : '/images/team.png'}}" mode="aspectFit"></image> <text>战队</text> </view> <view class="tab-item" bindtap="switchTab" data-index="2" data-type="player"> <image src="{{currentTab === 2 ? '/images/player-a.png' : '/images/player.png'}}" mode="aspectFit"></image> <text>选手</text> </view> </view> <!-- 数据列表 --> <view class="list-container"> <block wx:if="{{currentTab === 0}}"> <view class="list-item" wx:for="{{schedules}}" wx:key="id"> <text>{{item.name}}</text> </view> </block> <block wx:if="{{currentTab === 1}}"> <view class="list-item" wx:for="{{teams}}" wx:key="id"> <text>{{item.name}}</text> </view> </block> <block wx:if="{{currentTab === 2}}"> <view class="list-item" wx:for="{{players}}" wx:key="id"> <text>{{item.name}}</text> </view> </block> </view> </view> ``` ### 修改后的 `index.js` 文件 ```javascript Page({ data: { currentTab: 0, // 当前选中的标签页索引 schedules: [ { id: 1, name: '比赛1' }, { id: 2, name: '比赛2' }, { id: 3, name: '比赛3' } ], teams: [ { id: 1, name: '战队A' }, { id: 2, name: '战队B' }, { id: 3, name: '战队C' } ], players: [ { id: 1, name: '选手X' }, { id: 2, name: '选手Y' }, { id: 3, name: '选手Z' } ] }, switchTab(e) { const index = e.currentTarget.dataset.index; this.setData({ currentTab: index }); } }); ``` ### 解释 1. **动态切换图标**：在`<image>`标签中，使用了`{{currentTab === X ? 'active-image-path' : 'default-image-path'}}`的语法，根据当前选中的标签页(`currentTab`)动态切换图片路径。 - 如果`currentTab === 0`，则显示`schedule-a.png`；否则显示`schedule.png`。 - 同理，其他两个图标也按照同样的逻辑处理。 2. **`data-type`属性**：虽然这里没有直接用到`data-type`，但你可以扩展功能，比如通过`data-type`记录当前选中的类型，用于更复杂的逻辑处理。 3. **`switchTab`函数**：当用户点击某个标签时，通过`bindtap`事件触发`switchTab`函数，更新`currentTab`的值，从而切换图标和数据列表。 ###