小程序签到页面导航切换效果

    最近做了小程序的签到页面，页面上遇到了一个导航栏上可以切换四个页面，这是我攻克的第一个难关，当时在网上找了很多案例，但是都很复杂，并不是特别实用，就在最后关头，想到一个办法；

index.wxml文件

<!-- 导航 -->

<view class='top_nav'>

<view class="nav-name {{item.typeId == currentId ? 'nav-hover':''}}" wx:for="{{section}}" wx:key="id" id='{{item.typeId}}' catchtap='handleTap'> {{item.name}} </view>

</view>

<!-- 未使用 -->

<view hidden='{{currentId!=1}}'> <text>未使用</text></view>

<!-- 已使用 -->

<view hidden='{{currentId!=2}}'> <text>已使用</text></view>

<!-- 已过期 -->

<view hidden='{{currentId!=3}}'> <text>已过期</text></view>

<!-- 活动规则 -->

<view hidden='{{currentId!=3}}'> <text>活动规则</text> </view> 

index.js文件

Page({

/** * 页面的初始数据 */

data: { currentId: '1',

            section: [{ name: '未使用', typeId: '1' },

                           { name: '已使用', typeId: '2' },

                          { name: '已过期', typeId: '3' },

                          {name:'活动规则',typeId:'4'},

                          ],

},

//点击每个导航的点击事件

  handleTap: function(e) {

       let id = e.currentTarget.id;

      if(id){ this.setData({ currentId:id }) }

},

})

index.wxss样式文件

.top_nav{ border-bottom: 1px solid #dddddd; margin-bottom: 30rpx; margin-left: 30rpx; margin-right: 30rpx; }

.nav-name{ display: inline-block; color: #2b2e33; padding: 18rpx 10rpx 33rpx 10rpx; font-size: 45rpx; height:48rpx;}

.nav-hover{ color: #f5a623; border-bottom: 2px solid #f5a623;}

.use{ color: #dddddd;}

.use text{ color: #dddddd;}

效果图如下哦