微信小程序页面功能-----标签切换

一、页面布局

首先我们需要布局出标签切换的页面，下面不多描述直接上代码

1、html部分

<!-- 标签页标题 -->
<view class="tob">
  <view class="tab-item">音乐推荐器</view>
  <view class="tab-item">播放器</view>
  <view class="tab-item">播放列表</view>
</view>
<!-- 内容区域 -->
<view class="content">
  <swiper>
    <swiper-item>
    <include src="info.wxml" />
    </swiper-item>
    <swiper-item>
    <include src="play.wxml" />
    </swiper-item>
    <swiper-item>
    <include src="playlist.wxml" />
    </swiper-item>
  </swiper>
</view>
<!-- 底部播放器 -->
<view class="player"></view>

下面是三个标签页面设置

（1）info.html

<view style="background: #ccc; color: #000; height: 100%;">
info
</view>

（2）play.wxml

<view style="background: #ddd; color: #000; height: 100%;">
play
</view>

（3）playlist.wxml

<view style="background: #eee; color: #000; height: 100%;">
playlist
</view>

2、css部分

page {
  display: flex;
  flex-direction: column;
  background: #17181a;
  color: #ccc;
  height: 100%;
}
.tab{
  display: flex;
}
.tab-item{
  flex: 1;
  font-size: 10pt;
  text-align: center;
  line-height: 72rpx;
  border-bottom: 6rpx solid #eeeeee;
}
.content{
  flex: 1;
}
.content > swiper{
  height: 100%;
}
.player{
  background: #222;
  border-top: 1px solid #252525;
  height: 112rpx;
}

下面是我们的页面效果图

 

二、实现效果

修改pages/index/index.wxml文件中的tab区域，为3个tab-item绑定事件并设置data-item属性

  <view class="tab-item" bindtab="changeItem" data-item="0">音乐推荐器</view>
  <view class="tab-item" bindtab="changeItem" data-item="1">播放器</view>
  <view class="tab-item" bindtab="changeItem" data-item="2">播放列表</view>

在上述代码中，data-item的值表示swiper组件中对应的swiper-item索引

接下来修改content区域，为swiper组件中的current属性绑定变量item

<!-- 内容区域 -->
<view class="content">
  <swiper current="{{item}}">

完成上面代码后，在tab-item的changeItem事件中，将item的值设为data-item的值即可实现切换到对应的标签页。修改page/index/index.js文件，将item和changeItem增加到代码中

Page({
  data:{
    item:0,
  },
  changeItem:function(e){
    this.setData({
      item:e.target.dataset.item
    })
  }
})

切换标签页后还需要改变当前标签页对应的tab-item的样式，将文本颜色和底部的线条颜色设为红色，表示当前标签页处于活跃状态。下面通过判断变量tab的值，来为当前活跃的data-item增加一个active样式，具体代码如下

 <view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐器</view>
  <view class="tab-item {{tab==1?'active':''}}" bindtap="changeItem" data-item="1">播放器</view>
  <view class="tab-item {{tab==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>

接下来在pages/index/index.wxss中编辑active样式，具体代码如下

.tab-item.active{
  color: #c25b5b;
  border-bottom-color:#c25b5b ;
}

为了更改tab值，下面为swiper组件绑定改变事件，具体代码如下

<view class="content">
  <swiper current="{{item}}" bindchange="changeTab">

在上述代码中，changeTab事件处理函数会在swiper组件发生切换时调用。下面修改page/index/index.js文件，在页面数据中增加tab变量

  data:{
    item:0,
    tab:0
  },

然后编辑changeTab事件处理函数，实现当该函数被调用后，tab的值更改为当前标签页的索引

changeTab:function(e){
    this.setData({
      tab:e.detail.current
    })
  }