### [微信小程序中选项卡的实现方法](https://www.prosaas.cn/article/17052)

**Published:** 2018-09-07T06:16:04

**Author:** 5201314

**Excerpt:** 微信小程序中选项卡的应用随处可见，本篇文章就来给大家介绍微信小程序中选项卡的实现。思路之前写过基于swiper…

微信小程序中选项卡的应用随处可见，本篇文章就来给大家介绍微信小程序中选项卡的实现。

## 思路

-   之前写过基于swiper的选项卡，在小程序中有swiper组件，毫无疑问这里要用到swiper组件
    
-   小程序中的swiper组件有个问题就是不能根据内容自适应高度，所以要通过wx.getSystemInfoSync获取设备高度设置swiper高度
    
-   小程序中的swiper组件中swiper-item内容超出可视区后无法滚动显示，所以这里要用到另一个组件scroll-view。
    

_小程序中的swiper组件功能还是比较有限的，有待优化。_

## 方案

### 1.首先在js中设置数据

 data: {
    tabs: \['菜单一', '菜单二'\],// 导航菜单栏
    curIdx:0,// 当前导航索引
    scrollHeight:0, //滚动高度 = 设备可视区高度 -  导航栏高度
    list:\[\],// 内容区列表
  },

在onLoad函数中填充数据

  /\*\*
   \* 生命周期函数--监听页面加载
   \*/
  onLoad: function (options) {
    let list=\[\];
    for (let i=1;i<=30;i++){
      list.push(i)
    }
    this.setData({
      list: list
    });
  },

### 2.在WXML中循环渲染出导航

<!-- 导航栏开始 -->
<view class="swiper-tab">
  <view wx:for="{{tabs}}" wx:key class="swiper-tab-item {{curIdx==index?'swiper-active':''}}" data-current="{{index}}" catchtap="clickTab">
    <text>{{item}}</text>
  </view>
</view>

### 3.设置当前活动导航样式

/\*初始化样式\*/
view, text, picker, input, button, image{
  display: flex;
  box-sizing: border-box;
}
/\* 导航样式\*/
.swiper-tab {
  position: relative;
  width: 100%;
  height: 100rpx;
  justify-content: center;
  align-items: center;
}

.swiper-tab-item {
  background-color: #f3f3f3;
  width: 50%;
  height: 80rpx;
  justify-content: center;
  align-items: center;
}
.swiper-active{
  background-color: rgb(129, 190, 247);
  color: #fff;
}

### 4.内容显示区

内容显示区使用swiper组件，swiper-item个数要与tabs数组长度 一致

<!-- 内容开始 -->
<swiper class="swiper\_content" current="{{curIdx}}"   bindchange="swiperTab" style='height:{{scrollHeight}}px'>
  <swiper-item>
    <scroll-view class="scroll-y" scroll-y style='height:{{scrollHeight}}px' bindscrolltolower="onReachBottom">
    <view wx:for="{{list}}" wx:key>
      <text> 内容一{{item}}</text>
    </view>
        </scroll-view>
  </swiper-item>
  <swiper-item>
    内容二
  </swiper-item>
</swiper>

`小程序中的swiper组件有个问题就是不能根据内容自适应高度，所以要通过[wx.getSystemInfoSync][4]获取设备高度设置swiper高度`  
`小程序中的swiper组件中swiper-item内容超出可视区后无法滚动显示，所以这里要用到另一个组件[scroll-view][5]。`  
我们在onShow函数中通过getSystemInfoSync获取设备的宽高来设置swiper组件高度以及scroll-view高度

  onShow: function () {
    // 100为导航栏swiper-tab 的高度
   this.setData({
     scrollHeight: wx.getSystemInfoSync().windowHeight - (wx.getSystemInfoSync().windowWidth / 750 \* 100),
   })
  },

### 5.点击导航栏切换内容

  //点击切换
  clickTab: function (e) {
    this.setData({
      curIdx: e.currentTarget.dataset.current
    })
  },

### 6.滑动内容切换导航栏

  //滑动切换
  swiperTab: function (e) {
    this.setData({
      curIdx: e.detail.current
    });
  },

### 7.可滚动区域滚动最底刷新数据

  /\*\*
 \* 页面上拉触底事件的处理函数
 \*/
  onReachBottom: function () {
    // 更新列表
    let list = this.data.list;
    console.log(list)
    let lens = list.length
    for (let i = lens; i 

一个漂亮的选项卡就完成了。完整案例

以上就是本篇文章的全部内容了，更多精彩请关注知企PROSAAS。

以上就是微信小程序中选项卡的实现方法的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---