小程序swiper控件的使用

swiper实现左右滑动,以及tab点击,并且给swiper绑定下拉刷新事件

<view class="swiper-tab">
  <view class="start swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" catchtap="swichNav">私教课</view>
  <view class="swiper-tab-list {{currentTab==1 ? 'on-deta' : ''}}" data-current="1" catchtap="swichNav">团体课
  </view>

</view>

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{len*364+120}}rpx" bindchange="bindChange">
  <swiper-item>

<view class="container">
      <scroll-view class="list" style="height: 1220rpx" scroll-y="true" bindscrolltolower="loadMore">
        <block wx:for="{{personCourselist}}" wx:key="index">
    
            <view class="item">
              <view class="imag">
                <image src="{{item.cardImage}}" />
              </view>
              <view class="text-list">
                <text class="one">{{item.cardName}}</text>
                <text class="two">剩余{{item.restNumber}}/{{item.amountNumber}}节课</text>
              </view>
            </view>
       
        </block>
      </scroll-view>

    </view>


  </swiper-item>
  <swiper-item>
    <view class="container">
      <scroll-view class="list" style="height: 1220rpx" scroll-y="true" bindscrolltolower="loadMore">
        <block wx:for="{{contentlist}}" wx:key="index">
       
                <image src="{{item.courseImage}}" />
              </view>
              <view class="text-list">
                <text class="one">{{item.courseName}}</text>
                <text class="two">{{item.totalUser}}/{{item.maxNumber}}人</text>
              </view>
            </view>
  
        </block>
      </scroll-view>

    </view>

  </swiper-item>

</swiper>

js主要代码

swichNav: function (e) {
    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    }
 
    if (e.target.dataset.current == 1) {
      this.setData({
        contentlist: this.data.contentlist,
        currentPage: this.data.currentPage,
        allPages: this.data.allPages,
        courseType: "团体课",
        currentTab: e.target.dataset.current
      })
    } else if (e.target.dataset.current == 0) {
     
      that.setData({
        courseType: "私教课",
        currentTab: e.target.dataset.current
      })
    }
    // console.log(this.data.courseType)
},

  // 上拉加载更多
  loadMore: function (e) {
    console.log(this.data.courseType+"上拉")

    var _this = this;
    var userId = app.globalData.userData.id
    // 当前页是最后一页
    if (this.data.courseType == '团体课') {
      if (this.data.currentPage == this.data.allPages) {
      
        this.setData({
          loadMoreData: '我也是有底线的',
          hideBottom: false
        })
        return;
      }
     
      var tempCurrentPage = this.data.currentPage;
      var pageSize = this.data.pageSize * 1 + tempCurrentPage * 1;
      this.setData({
        currentPage: tempCurrentPage,
        hideBottom: false
      })
      setTimeout(function () {
        _this.setData({
          hideBottom: true
        })
        _this.loadData(userId, pageSize)
      }, 300)
    }else{
      if (this.data.pcurrentPage == this.data.pallPages) {
        // console.log(this.data.pcurrentPage)
        // console.log(this.data.pallPages)
        this.setData({
          loadMoreData: '我也是有底线的',
          hideBottom: false
        })
        return;
      }
     
      var tempCurrentPage = this.data.pcurrentPage;
      var pageSize = this.data.pageSize * 1 + tempCurrentPage * 1;
      this.setData({
        currentPage: tempCurrentPage,
        hideBottom: false
      })
      setTimeout(function () {
        _this.setData({
          hideBottom: true
        })
        _this.loadPersonCourseData(userId, pageSize)//请求的接口数据
      }, 300)

    }


  },
  bindChange: function (e) {
    var that = this;
    
    if (e.detail.current === 1) {
     
      that.setData({
        contentlist: this.data.contentlist,
        currentPage: this.data.currentPage,
        courseType: "团体课",
        currentTab: e.detail.current
      })

    } else {
    
      that.setData({
        courseType: "私教课",
        currentTab: e.detail.current
      })
    }
    that.setData({ currentTab: e.detail.current });

  },