微信小程序- scroll-view 之滚动Tab选项卡（左右可滑动切换）

先来说明一下我们需要实现的最终效果：

1. tab标题有多个，一屏内无法全部显示，所以使用 scroll-view组件，使其可横向滚动。
2. 点击切换tab标题时，内容区随之切换；内容区左右滑动切换时，tab标题也随之切换。所以使用swiper组件实现左右切换。
3. 每个tab标题样式一致；当内容区几个页面样式一样时，可以用wx:for循环遍历重复出来。
4. 当选中的tab标题不在当前屏显示时，要使其能显示到当前屏中。

下面我们直接看代码：

1. WXML

1、设置data-current属性用于：点击当前项时，通过点击事件swichNav中处理e.dataset.current取到点击的目标值。
2、swiper组件的current组件用于控制当前显示哪一页

3、swiper组件绑定change事件switchTab，通过e.detail.current拿到当前页

<view>

  <!-- tab导航栏 -->
  <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
    <view class="tab-item {{currentTab == index ? 'tab-active' : ''}}" data-current="{{index}}" bindtap="swichNav" wx:for="{{tabName}}">{{item.name}}</view>
  </scroll-view>

  <!-- 主体内容 -->
  <swiper current="{{currentTab}}" duration="300" bindchange="switchTab" style="height:{{winHeight}}rpx" class="tab-content">

    <swiper-item wx:for="{{tabName.length}}"><!-- 当几个页面样式一样时，可以用wx:for循环遍历重复出来 -->
      <scroll-view scroll-x="false" scroll-y="true" class="scoll-h" enable-back-to-top="true">
       <view>{{choosedTabInformation}}</view>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

---

2. JS

let tabNum = 0; // 当前选中第几个tab标题
Page({
  data: {
    winHeight: "", // 窗口高度
    currentTab: 0, // 预设当前项的值
    scrollLeft: 0, // tab标题的滚动条位置
    tabName:[], // tab标题的名字
    choosedTabInformation: "" // 当前选中tab标题的信息
  },

  // 左右滚动tab标题，切换标签
  switchTab: function(e) {
    let current = e.detail.current;
    this.setData({
      currentTab: current
    });
    console.log("当前选中tab标题", current);
    this.getInformation(current); //  获取当前选中tab标题的信息
  },

  // 点击tab标题，切换当前页
  swichNav: function(e) {
    console.log("点击tab标题", e.target.dataset.current);
    let cur = e.target.dataset.current;
    if (this.data.currentTab == cur) {
      return false;
    } else {
      this.setData({
        currentTab: cur
      })
    }
    console.log("当前选中tab标题", cur);
    this.getInformation(cur); //  获取当前选中tab标题的信息
  },

  /****************    高度自适应（rpx）    ****************/
  getWindowHeight: function() {
    let that = this;
    wx.getSystemInfo({
      success: function(res) {
        let clientHeight = res.windowHeight,
          clientWidth = res.windowWidth,
          rpxR = 750 / clientWidth; //比例
        console.log(clientHeight);
        console.log(clientWidth);
        let calc = clientHeight * rpxR; // 如有最底部导航栏空间，则 calc - 底部导航栏高度
        console.log(calc);
        that.setData({
          winHeight: calc
        });
      }
    });
  },

  onLoad: function(options) {
    this.getWindowHeight(); // 高度自适应（rpx）
    this.getTabName(); // 获取头部导航栏tab标题的名字
    this.getInformation(tabNum); //  获取当前选中tab标题的信息
  },

  /****************    获取头部导航栏tab标题的名字    ****************/
  getTabName: function () {
    console.log("获取头部导航栏tab标题的名字");
    // 假数据
      this.setData({
        tabName: [{ name: "星巴克" }, {name:"肯德基"},{name:"必胜客"},{name:"优酷会员"},{name:"哈根达斯"},{name:"太平洋咖啡"},{name:"呷哺呷哺"},{name:"喜马拉雅"},{name:"百果园"},{name:"汉堡王"},{name:"COSTA咖啡"},{name:"coco都可"}],
      })
  },

  /****************    获取对应tab标题的信息    ****************/
  getInformation: function(tabNum) {
    // 假数据
    if (tabNum == 0) {
      console.log("当前选中第1个tab标题");
      this.setData({
        choosedTabInformation: "1",
      })
    } else if (tabNum == 1) {
      console.log("当前选中第2个tab标题");
      this.setData({
        choosedTabInformation: "2",
      })
    }else if (tabNum == 2) {
      console.log("当前选中第3个tab标题");
      this.setData({
        choosedTabInformation: "3",
      })
    } else if (tabNum == 3) {
      console.log("当前选中第4个tab标题");
      this.setData({
        choosedTabInformation: "4",
      })
    } else if (tabNum == 4) {
      console.log("当前选中第5个tab标题");
      this.setData({
        choosedTabInformation: "5",
      })
    } else if (tabNum == 5) {
      console.log("当前选中第6个tab标题");
      this.setData({
        choosedTabInformation: "6",
      })
    } else if (tabNum == 6) {
      console.log("当前选中第7个tab标题");
      this.setData({
        choosedTabInformation: "7",
      })
    } else if (tabNum == 7) {
      console.log("当前选中第8个tab标题");
      this.setData({
        choosedTabInformation: "8",
      })
    } else if (tabNum == 8) {
      console.log("当前选中第9个tab标题");
      this.setData({
        choosedTabInformation: "9",
      })
    } else if (tabNum == 9) {
      console.log("当前选中第10个tab标题");
      this.setData({
        choosedTabInformation: "10",
      })
    } else if (tabNum == 10) {
      console.log("当前选中第11个tab标题");
      this.setData({
        choosedTabInformation: "11",
      })
    } else if (tabNum == 11) {
      console.log("当前选中第12个tab标题");
      this.setData({
        choosedTabInformation: "12",
      })
    }
  },
})

---

3. WXSS

根据自己需求进行样式设置

/* =======================================
		         tab标题 选择卡 
  ======================================= */

/* 头部导航栏 */

.tab-h {
  height: 80rpx;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden; /* 超出部分隐藏 */
  line-height: 80rpx;
  background: #fff;
  border-bottom: 1rpx solid #cecece;
  font-size: 28rpx;
  white-space: nowrap; /* 设置滚动视图容器不换行 *//* 固定在头部 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
}

/* 每个tab标题样式 */
.tab-item {
  padding: 0 36rpx;
  display: inline-block;
}

/* 选中其中一个tab标题时，修改样式 */

.tab-item.tab-active {
  color: #fff;
  /* box-sizing: border-box; */
  background-color: #4675f9;
  /* position: relative; */
}

/* 主体内容 预留头部导航栏的高度 */

.tab-content {
  margin-top: 80rpx;
}

/* 主体内容 scroll-view高度 */

.scoll-h {
  height: 100%;
}

---

最终效果