微信小程序：选项卡切换内容效果

 

 wxml：

<view class="swiper-tab">
    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="tabNav">
    <icon class="iconfont icon-zhoubianpeitao"></icon>
    配套    
    <text class="item_zhoubian_hr"></text>
    </view>
    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="tabNav">
    <icon class="iconfont icon-traffic"></icon>
    交通    
    <text class="item_zhoubian_hr"></text>
    </view>
    <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="tabNav">
    <icon class="iconfont icon-xuexiao_xuesheng"></icon>
    学校
    <text class="item_zhoubian_hr"></text>
    </view>
    <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="tabNav">
    <icon class="iconfont icon-yiliao_"></icon>
    医疗
    <text class="item_zhoubian_hr"></text>
    </view>
    <view class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="tabNav">
    <icon class="iconfont icon-gouwu"></icon>
    购物
    <text class="item_zhoubian_hr"></text>
    </view>
</view>
<swiper current="{{currentTab}}" duration="1000"  class="item_zhoubian_con">
    <swiper-item><view>学校：女子大学、红星小学、天华小学公园：红星公园、湖南省森林植物园公交车：7、17、102、103、107、140、801、802、805、702、703、147、123、16、120、152、502、806商场：步步高、大润发医院：仁和医院、博雅眼科银行：农行、招行、信用社、浦发银行</view></swiper-item>
    <swiper-item><view>公交车：7、17、102、103、107、140、801、802、805、702、703、147、123、16、120、152、502、806</view></swiper-item>
    <swiper-item><view>长沙银行</view></swiper-item>
    <swiper-item><view>学校：女子大学、红星小学、天华小学公园：红星公园、湖南省森林植物园公交车：7、17、102、103、107、140、801、802、805、702、703、147、123、16、120、152、502、806商场：步步高、大润发医院：仁和医院、博雅眼科银行：农行、招行、信用社、浦发银行</view></swiper-item>
    <swiper-item><view>学校：女子大学、红星小学、天华小学公园：红星公园、湖南省森林植物园公交车：7、17、102、103、107、140、801、802、805、702、703、147、123、16、120、152、502、806商场：步步高、大润发医院：仁和医院、博雅眼科银行：农行、招行、信用社、浦发银行</view></swiper-item>
</swiper>

 wxss

@import "../../base/css/iconfont.wxss";//阿里字体样式引入
/* 下面是tobar */
.swiper-tab {
  width: 100%;
  text-align: center;
  /* line-height: 80rpx; */
  background-color:white;
}

.swiper-tab-list {
  font-size: 22rpx;
  display: inline-block;
  width: 20%;
  color: #979797;
  border-bottom: 0rpx; text-align: center;
}
.swiper-tab-list icon{font-size: 53rpx; display: block;color: #cbcbcb;}

.on {
  color: #585858;
}
.on icon{
background-image: linear-gradient(270deg, #6d50fb 0%,#5ba8fc 100%);
        -webkit-text-fill-color: transparent;/*填充透明颜色*/
        -webkit-background-clip: text;/*背景剪裁*/
}
.on .item_zhoubian_hr{
   width: 55rpx; height: 5rpx;display: block; margin: 10rpx auto;
  background-image: linear-gradient(270deg, #6d50fb 0%,#5ba8fc 100%);
}
.item_zhoubian_con swiper-item {
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.item_zhoubian_con swiper-item view {
  text-align: center;
  padding: 30rpx;
}

 js：

  tabNav: function (e) {
    if (this.data.currentTab === e.currentTarget.dataset.current) {
      return false;
    } else {
      var showMode = e.currentTarget.dataset.current == 0;
      this.setData({
        currentTab: e.currentTarget.dataset.current,
      })
    }
  },