小程序swiper控件的使用

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

小程序swiper控件的使用_第1张图片


  私教课
  团体课
  


  


      
        
    
            
              
                
              
              
                {{item.cardName}}
                剩余{{item.restNumber}}/{{item.amountNumber}}节课
              
            
       
        
      

    


  
  
    
      
        
       
                
              
              
                {{item.courseName}}
                {{item.totalUser}}/{{item.maxNumber}}人
              
            
  
        
      

    

  


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 });

  },

 
  

你可能感兴趣的:(小程序,微信小程序实战教程)