微信小程序中标签页切换效果是怎么做出来的

于传统网页开发中的标签页切换效果不同的是，小程序的标签页切换更接近原生APP的交互体验！也就是可以通过左右滑动页面进行切换，类似于网页开发中的焦点图切换的效果。
——这当然是通过微信小程序强大的组件和API实现的。

目前为止，笔者知道的可以“完美”实现这一功能的，有两种方式。

1、Swiper组件方式实现

如图

顶部的3个标签页标题用数字0、1、2来表示——这也代表绑定后页面的位置。当用户向左滑动页面时，标签页0就会被滑到左边不可见区域，而标签页1被滑入content区域。以此类推。

<view class="tab">
  <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>
</view>

<view class="content">
  <swiper current="{{item}}" bindchange="changeTab">
  <!-- 每个滑块(swiper-item)都有一个index，也就是current要获取的值 -->
    <swiper-item>
      <include src=".././info/info.wxml" />
    </swiper-item>
    <swiper-item>
      <include src=".././play/play.wxml" />
    </swiper-item>
    <swiper-item>
      <include src=".././pL/playList.wxml" />
    </swiper-item>
  </swiper>
</view>

在微信小程序中，切换标签页有两种方式：一是直接滑动content区域；二是通过单击tab区域中的某一个tab-item切换到对应的标签页。
我们在tab-item中为其传递“绑定参数data-item”，就是为了切换时定位用的。

在js中我们这样写：

Page({
  data:{
    item:0,
    tab:0
  },
  changeItem:function(e){
    // console.log(e);
    this.setData({
      item:e.target.dataset.item
    })
  },
  changeTab:function(e){
    // console.log(e);
    this.setData({
      tab:e.detail.current
    })
  }
})

当“滑动”或“点击”时，将tab或item的值更改为当前标签页的索引。（item通过 数据绑定 影响current（content区域），tab通过影响 样式（class）/item 进而影响tab区域）

这种方式实际上是把“标签页”当做“轮播图”来做了（小程序轮播图swiper组件默认不自动播放）

2、block+hidden方式实现

这里我用了WeUI，但这不是重点——会用就行。（简单说一下相关命令）
下载后通过：

@import 'style/weui.wxss';

引入。

<view class="weui-tab">
	<view class="weui-navibar">
		<block wx:for-items="{{tabs}}" wx:key="{{index}}">
			<view id="{{index}}" class="{{activeIndex==index?'weui-bar_item_on':''}}" bindtap="tabClick">
				<view>{{item}}</view>
			</view>
		</block>
		<view style="left:{{sliderLeft}}px;transform:translateX({{sliderOffset}}px);"></view>
	</view>
	<view class="weui-tab_panel">
		<view hidden="{{activeIndex!=0}}">标签页1的内容</view>
		<view hidden="{{activeIndex!=1}}">标签页2的内容</view>
		<view hidden="{{activeIndex!=2}}">标签页3的内容</view>
	</view>
</view>

上述代码中，最外层的weui-tab表示整体是一个标签页切换的页面。第2-9行是顶部导航条——其中3-7行用于显示每个标签页按钮，第8行用于显示标签页按钮底部的指示条；第10-14行是标签页的面板数据。

data:{
	tabs:['正在热映','搜索','分类'],   //标签页标题数组
	activeIndex:0,       //当前选中的标签页索引
	slideOffset:0,       //指示条的平移距离
	sliderLeft:0       //指示条的left值
}