微信小程序 tab切換內容及分頁

在實際項目中，經常會遇到點擊切換不同內容的情況，尤其是個人中心的訂單頁，還要同時實現滾動分頁效果。

效果如下：

 

<view class="tabNav">
    <view wx:for="{{navTab}}" wx:key="index" data-idx="{{index}}" bindtap="currentTab" class="{{currentTab==index ? 'cur' : ''}}"><text>{{item}}</text></view>
</view>
<view class="orderInfo">
  <view class="orderInfo-item" wx:for="{{sendList}}" wx:key="index"> 這是內容{{item.content}} </view> 
</view>

 

.tabNav{z-index: 4; position: fixed; top:0;left:0; width:100%; height:80rpx; line-height: 80rpx; background: #fff; display: flex; padding:0 30rpx; border-bottom:1px solid #f5f5f5; box-sizing: border-box; }
.tabNav> view{text-align: center; margin-right:50rpx;}
.tabNav> view:last-child{ margin-right: 0;}
.tabNav> view text{padding:0 15rpx; height:75rpx; display:inline-block;}
.tabNav .cur text{ border-bottom:5rpx solid #36ccf9; color:#000;}

 

import cfg from '../../utils/config.js';
import util from '../../utils/util.js';
var app = getApp();
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    navTab: ['全部訂單','待付款','待發貨', '待收貨'],        
    currentTab: 0,
    sendList:[],
  },
  select: {
    page: 1,
    size: 6,
    isEnd: false
  },
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    this.getData()
  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
    this.getData()
  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  },
  currentTab: function (e) {
    if (this.data.currentTab == e.currentTarget.dataset.idx){
      return;
    }
    this.setData({
      currentTab: e.currentTarget.dataset.idx
    })
    this.select={
      page: 1,
      size: 6,
      isEnd: false
    }
    this.data.sendList=[];
    this.getData()
  },
  getData:function(){
    var _this=this;
    if (this.select.isEnd){
      return
    }
    var type = this.data.currentTab == 0 ? 'ALL' : this.data.currentTab == 1 ? 'WAIT_DELIVER' : 'DELIVER';
    util.request(`你的接口地址，后面的是參數` + type + `/` + this.select.page + `/` + this.select.size, {}, 'GET', function (res) {
      var content = res.data.data;
      _this.setData({
        sendList: (_this.data.sendList).concat(content) 
      })
      if (content.length>0){
        _this.select.page++
      }else{
        _this.select.isEnd=true
      }
    })
  },
})

每次切換tab，要把原本的數據清空，重置select，防止分頁時出現數據混亂的情況，發出請求時，根據現在的currentTab值，去對應的設定type值，請求不同的接口。