摘要：
在实际项目中，我们经常会遇到点击在不同内容之间切换的情况，尤其是在个人中心的订单页面中。我们还需要同时实现滚动分页的效果。“cur'：''｝”˃{｛item｝｝这是内容｛{item.content}｝。tabNav｛z索引：4；位置：固定；顶部：0；左侧：0；100%；高度：80rpx；行高度：80rpm；背景：#fff；显示：flex；pa填充：030rpx；边框底部：1pxsolid#f5f5f5；框大小：边框框；｝tabNav˃view｛text align:center；margin-right:50rpx；｝。tabNav˃view:最后一个子项｛margin-right:0；｝。tabNav˃viewtext｛padding:015rpx；height:75rpx；display:inline-block；｝。选项卡导航。短文字｛border-bottom:5rpxsolid#36ccf9；color:#000；｝importcfgfrom'../../utils/config。js'；importutilfrom'../../utils/util。js'；varapp=getApp（）；页面（｛/***页面的初始数据*/data:｛navTab:[“所有订单”，“待付款”，“要发货”，“需要接收”]，currentTab:0，sendList:[]，｝，select:｛Page:1，size:6，isEnd:false｝，/***生命周期函数--侦听页面加载*/onLoad:function（选项）｛this.getData（）｝，//*生命周期功能--侦听页面初始呈现完成*/onReady:function（）｛｝，/***与页面相关的事件处理函数--侦听用户下拉操作*/onPullDownRefresh:function（）｛｝，/**页面下拉事件的处理函数*/onReachBottom:function）｛this.getData（）｝，//**用户单击右上角共享*/onShareAppMessage:function，currentTab:函数（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｝vartype=this.data.currentTab==0？
在实际项目中，经常会遇到点击切换不同内容的情况，尤其是个人中心的订单页，还要同时实现滚动分页效果。
效果如下：
<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 wx:for="{{sendList}}" wx:key="index"> 这是内容{{item.content}} </view>
</view>
.tabNav{z-index: 4; position: fixed; top:0;left:0; 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值，请求不同的接口。