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