How to implement tabs in WeChat mini programs

The application of tabs in WeChat mini programs can be seen everywhere. This article will introduce to you the implementation of tabs in WeChat mini programs.

Ideas

• I have written a swiper-based tab before, and there is a swiper component in the applet. There is no doubt that the swiper component is used here

• The swiper component in the applet has a problem that it cannot adapt the height according to the content, so you need to get the device height and set the swiper height through wx.getSystemInfoSync

• The swiper-item content in the swiper component in the applet cannot be scrolled after it exceeds the visible area, so another component scroll-view is used here.

#The functions of the swiper component in the mini program are still relatively limited and need to be optimized.

Plan

1. First set the data in js

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

Fill the data in the onLoad function

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

2. Loop in WXML Render navigation

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

3. Set the current active navigation style

/*初始化样式*/
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. Content display area

The content display area uses the swiper component, and the number of swiper-items must be equal to the number of tabs The array lengths are consistent

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

The swiper component in the applet has a problem that it cannot adapt the height according to the content, so you need to get the device height and set the swiper height through [wx.getSystemInfoSync][4]
The swiper-item content in the swiper component in the applet cannot be scrolled after it exceeds the visual area, so another component [scroll-view][5] is used here.
We get the width and height of the device through getSystemInfoSync in the onShow function to set the swiper component height and scroll-view height

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

5. Click the navigation bar to switch content

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

6 .Swipe the content to switch the navigation bar

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

7.Scroll the scrollable area to the bottom to refresh the data

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

A beautiful tab is completed. Complete Case

The above is the entire content of this article. For more exciting information, please pay attention to the php Chinese website.

The above is the detailed content of How to implement tabs in WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!