小程序swiper實現訂單列表

實現如圖效果，點擊切換，拖動切換的效果。。。

視圖層WXML:

<view class="swiper-tab">
  <view wx:for="{{navTab}}" wx:key="{{index}}" class="swiper-tab-list {{currentTab==index ? 'on_pdd' : ''}}" data-current="{{index}}" bindtap="switchNav">{{item}}</view>
</view>
<view class="c_t60"></view> 

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight}}px" bindchange="bindChange">
  <swiper-item wx:for="{{navTab}}" wx:key="index">
    <scroll-view class="scrollWrap" scroll-y="true" style='height:{{winHeight}}px;'>
      <my-noData wx:if="{{orderList.length<1&&!loading}}" nodata="{{nodataType}}"></my-noData>
      <my-order orderList="{{orderList}}" bind:goOrderDetail="toDetail"></my-order>
      <view class="no-more" wx:if="{{isNoMoreData}}">------------ 已經到底了 ------------</view>
    </scroll-view>
  </swiper-item>
</swiper>

//my-noData my-order是自己寫的組件，在json文件裏面引入使用即可；
//winHeight 通過獲取設備高度，動態賦值，swiper需要一個高度屬性

邏輯層js：

Page({
  data: {
    nodataType: 7,
    orderList: [],    //訂單列表數據，接口獲取
    currentPage: 1,
    isNoMoreData: false,
    orderState: null,
    winHeight: 900,
    currentTab: 0,     //當前顯示tab的下標
    navTab: ['全部', '待結算', '已結算', '退款'],
    loading:true,
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) { 
    this.initData(1);    //獲取數據的方法
  },
  initData(currentPage) {
   
    //寫你自己的接口

  },
  switchNav(e) {  //點擊 這個方法會觸發bindChange()方法
    let isSelect = e.target.dataset.current;
    this.setData({
      currentTab: isSelect,

    })
  },

  bindChange(e) {    //切換swiper
    let isSelect = e.detail.current;

    if (isSelect != 0) {
      this.setData({
        orderState: isSelect
      })
    }
    else {
      this.setData({
        orderState: null
      })
    }
    this.setData({
      isNoMoreData: false,
      loading: true,
      currentTab: isSelect,
      orderList: []
    })
    this.initData(1)
  },
  toDetail(val){
    console.log(val.detail)
    let obj = JSON.stringify(val.detail);
    wx.navigateTo({
      url: '../orderDetail/orderDetail?item=' + encodeURIComponent(obj)
    })
  },

  /**
 * 生命週期函數--監聽頁面初次渲染完成
 */
  onReady: function () {   //獲取設備高度
    let _this = this;
    wx.getSystemInfo({
      success: function (res) {
        // console.log(res.windowWidth);
        // console.log(res.windowHeight);
        _this.setData({
          winHeight: res.windowHeight
        })
      },
    })

  },
  /**
  * 頁面上拉觸底事件的處理函數
  */
  onReachBottom: function () {    //上拉加載分頁
    this.setData({
      loading:true
    })
    if (!this.data.isNoMoreData&&this.data.orderList.length>0) {
      this.initData(++this.data.currentPage);
    }
  },
})