微信小程序点击变色并且视图切换显示 /隐藏详情（通过点击事件来实现界面切换）

微信小程序点击变色并且视图切换显示 /隐藏详情（通过点击事件来实现界面切换）

先看效果：点击热门是当前页，点击关注是关注页面

html部分：

 <view class="hot {{TopIndex == 0 ? 'active':''}}" data-index="0" bindtap="click">热门</view>//3元表达式判断点击的下表是不是当前下表如果是就切换否则不切换
 <view class="attention {{TopIndex == 1 ? 'active':''}}" data-index="1" bindtap="click">关注</view>

 <view class="content" wx:if="{{TopIndex == 0}}">
       <view>这是热门页</view>
    </view>
    <view class="content1" wx:if="{{TopIndex == 1}}">
        <view>这是关注</view>
    </view>
 

css部分：.active { color: #000; }
js部分：

 data: {
        TopIndex: 0
    },
     click(e) {
        let index = e.currentTarget.dataset.index
        console.log(index)
        this.setData({
            TopIndex: index
        })
    },