小程序tab栏切换详解

一、小程序tab栏切换不刷新

在小程序开发中，使用tab栏进行页面切换是常用的功能之一。当用户从一个tab切换到另一个tab时，往往希望不会刷新之前已加载的页面，而是可以缓存页面的状态。实现这个功能比较简单，只需要在app.json中设置页面“usingComponents”属性中的“keep-alive”为true即可。如下所示：

{
  "usingComponents": {
    "van-tabs": "/vant-weapp/dist/tabs/index",
    "van-tab": "/vant-weapp/dist/tab/index",
    
    // 设置keep-alive
    "van-tabbar": "/vant-weapp/dist/tabbar/index",
    "van-tabbar-item": "/vant-weapp/dist/tabbar-item/index",
    "van-icon": "/vant-weapp/dist/icon/index",
    "van-popup": "/vant-weapp/dist/popup/index"
  }
}

二、微信小程序tab栏切换

在微信小程序中，tab栏切换是常用的功能，并且每个tab页面都需要在app.json中进行配置。如下所示：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/other/other",
    "pages/more/more"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  // 配置tabBar
  "tabBar": {
    "color": "#747474",
    "selectedColor": "#2d8cf0",
    "borderStyle": "black",
    "backgroundColor": "#fff",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/index.png",
      "selectedIconPath": "images/index_hover.png"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "images/logs.png",
      "selectedIconPath": "images/logs_hover.png"
    }, {
      "pagePath": "pages/other/other",
      "text": "其它",
      "iconPath": "images/other.png",
      "selectedIconPath": "images/other_hover.png"
    }]
  }
}

三、小程序tab栏切换不存放页面栈

在小程序中切换tab页面时，如果设置为不存放页面栈，即可以避免tab页面切换时页面刷新的问题。在跳转到页面时，设置“open-type”属性为“switchTab”即可。如下所示：

<button open-type="switchTab" data-url="pages/logs/logs">切换tab</button>

四、小程序tab切换数据重复请求

在小程序中，切换tab页面时，可能需要发起一些数据请求进行数据的加载。如果在切换tab之后再次切回来，之前请求的数据会被重新加载，造成重复请求的问题。为了解决这个问题，可以在页面切换时，使用页面的生命周期函数onShow()来判断数据是否已经请求过。如下所示：

onShow() {
  if(this.isLoaded) {
    return;
  }
  this.loadData();
  this.isLoaded = true;
}

五、微信小程序tab切换

在微信小程序中，可以使用swiper组件来实现tab切换。swiper组件有很多属性可以调整切换效果。如下所示：

<swiper indicator-dots="{{false}}" indicator-active-color="#fff" indicator-color="#9b9b9b" autoplay="{{false}}" circular="{{false}}" vertical="{{false}}" duration="{{300}}" current="{{currentIndex}}" bindchange="onSwiperChange">
  <swiper-item>
    页面1
  </swiper-item>
  <swiper-item>
    页面2
  </swiper-item>
</swiper>

六、小程序tab切换效果

实现小程序tab切换效果，可以结合swiper组件和wxs。在wxs中定义启动和结束状态的样式，然后在swiper-item中动态进行样式绑定即可。如下所示：

<swiper-item class="{{index==currentIndex ? 'page-active' : 'page-hidden'}}">
  页面内容
</swiper-item>

<wxs module="style">
  var animations = {
    visible: wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0,
      transformOrigin: "50% 50% 0"
    }).opacity(1).step().export(),
    hidden: wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0,
      transformOrigin: "50% 50% 0"
    }).opacity(0).step().export()
  };
  module.exports = animations;
</wxs>

<style lang="less">
  .page-hidden {
    animation: style.hidden;
  }
  .page-active {
    animation: style.visible;
  }
</style>

七、微信小程序tab栏

在微信小程序中，可以通过修改app.json的tabBar属性来配置tab栏内容、样式等。如下所示：

{
  "tabBar": {
    "color": "#7d7d7d",
    "selectedColor": "#4e4e4e",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/tabbar/index.png",
      "selectedIconPath": "images/tabbar/index-actived.png"
    }, {
      "pagePath": "pages/cart/cart",
      "text": "购物车",
      "iconPath": "images/tabbar/cart.png",
      "selectedIconPath": "images/tabbar/cart-actived.png"
    }, {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "images/tabbar/mine.png",
      "selectedIconPath": "images/tabbar/mine-actived.png"
    }]
  }
}

八、微信小程序tab切换内容

在微信小程序中，tab切换的内容可以使用scroll-view组件包裹，并通过改变scroll-view的left属性来切换内容。如下所示：

<view class="container">
  <scroll-view class="scroll-view" scroll-x="{{true}}" scroll-left="{{currentTab}}" bindscroll="scroll">
    <view class="item {{currentTab==0?'active':''}}" data-current-tab="0" bindtap="switchTab">Tab1</view>
    <view class="item {{currentTab==1?'active':''}}" data-current-tab="1" bindtap="switchTab">Tab2</view>
    <view class="item {{currentTab==2?'active':''}}" data-current-tab="2" bindtap="switchTab">Tab3</view>
  </scroll-view>
  <view class="content">
    <view class="tab-page {{currentTab==0?'active':''}}">页面1</view>
    <view class="tab-page {{currentTab==1?'active':''}}">页面2</view>
    <view class="tab-page {{currentTab==2?'active':''}}">页面3</view>
  </view>
</view>

九、小程序左右滑动切换tab

在小程序开发中，实现左右滑动切换tab的效果可以在swiper组件中使用“changed”事件和“setData()”函数来实现。在swiper中使用“changed”事件监听当前页码的变化，然后在setData()函数中动态改变“activeIdx”的值来实现左右滑动切换tab的效果。如下所示：

<swiper class="swiper" current="{{activeIdx}}" duration="{{300}}" bindchange="swiperChange">
  <swiper-item class="swiper-item" wx:for="{{navList}}" wx:key="title">
    <view class="nav" bindtap="navTap">{{item.title}}</view>
  </swiper-item>
</swiper>

Page({
  data: {
    activeIdx: 0
  },
  swiperChange(e) {
    this.setData({
      activeIdx: e.detail.current
    });
  }
});