5-1 使用swiper配合上选项卡切换视图

如图：在日常开发中会碰到这种上选项卡切换的页面，（一般为1～4个选项卡切换，或者像新闻类app可滑动的选项卡）在这里编写那种指定个数的页面开发

.wxml

<view class="swiper-tab">
    <block wx:for="{{titlelist}}">
      <view class="swiper-tab-list {{currentTab==index ? 'on' : ''}}" data-current="{{index}}" bindtap="swichNav">{{item}}</view>
    </block>
</view>

 .js

const app = getApp()

Page({
  data: {
    // tab标题
    titlelist: ["日报", "精选"],
    // tab切换
    currentTab: 0,
  },

//选项卡事件
  swichNav: function (e) {
    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
})

.wxss

.swiper-tab
{ 
  height: 30px; 
  line-height: 30px; 
  background: #FFF; 
  display: flex; 
  position: relative; 
  z-index: 2; 
  border-bottom: 1px solid #F4F4F4; 
  flex-direction:row; 
  justify-content:center; 
  align-items:center;
  }

.swiper-tab-list
{ 
  margin: 0 20px;  
  padding: 0 4px; 
  font-size: 28rpx; 
  font-family: Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans CN", "PingFang SC", Roboto, "微软雅黑", "Heiti SC", "Microsoft Yahei", sans-serif 
}

.on
{ 
  border-bottom: 1px solid #48C23D; 
  color: #48C23D; 
}

得到如图效果，接下来只需要将对应的选项卡对应一个swiper-item就可以互相绑定切换页面，通过currentTab绑定切换

.wxml(因为swiper中的current属性可以指定当前所在的swiper-item所以可以根据这个属性来进行联动)

因为之前设置选项卡高度为30外加line 1所以获取屏幕高度减去31为对应视图的高度

<view class="swiper-tab">
    <block wx:for="{{titlelist}}">
      <view class="swiper-tab-list {{currentTab==index ? 'on' : ''}}" data-current="{{index}}" bindtap="swichNav">{{item}}</view>
    </block>
</view>

<!--
                幻灯片
                indicator-dots  Boolean     是否显示面板指示点
                autoplay        Boolean     是否自动切换
                current         Number      当前所在页面的 index
                interval        Number      自动切换时间间隔
                duration        Number      滑动动画时长
                bindchange      Event       current 改变时会触发 change 事件，event.detail = {current: current}

                IMAGE
                mode参数
                    aspectFill      保持纵横比缩放图片，只保证图片的短边能完全显示出来
                    aspectFit       保持纵横比缩放图片，使图片的长边能完全显示出来
                    scaleToFill     不保持纵横比缩放图片，使图片完全适应

-->
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
    <!-- 日报 -->
    <swiper-item>
        <view class="themes-box-top">
          <text class="themes-box-title">日报</text>
        </view>
    </swiper-item>

    <!-- 精选 -->
    <swiper-item>
        <view class="themes-box-top">
          <text class="themes-box-title">精选</text>
        </view>
    </swiper-item>

</swiper>

.js

获取系统信息来设置属性用来配置页面

const app = getApp()

Page({
  data: {
    /**
         * 页面配置
         */
    winWidth: 0,
    winHeight: 0,
    // tab标题
    titlelist: ["日报", "精选"],
    // tab切换
    currentTab: 0,
  },

  /** 
     * 页面初始化
     * options 为页面跳转所带来的参数
     */
  onLoad: function (options) {
    var that = this;

    /**
     * 获取系统信息
     */
    wx.getSystemInfo({

      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }

    });
  },

//选项卡事件
  swichNav: function (e) {
    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },

  /**
  * 滑动切换tab
  */
  bindChange: function (e) {

    var that = this;
    that.setData({ currentTab: e.detail.current });

  },
})

后续的swiper-item中要填充什么内容，就根据各自的需求填充即可，如下为效果图