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

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

.wxml

    
      {{item}}
    

 .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为对应视图的高度

    
      {{item}}
    




    
    
        
          日报
        
    

    
    
        
          精选
        
    

.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中要填充什么内容，就根据各自的需求填充即可，如下为效果图