小程序Tab切换

懒得去接口重新写了，如果有需要的自己去一下接口 

wxml：

<!-- order.wxml --> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav"> 待支付 </view> <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav"> 待服务 </view> <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav"> 已完成 </view> <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav"> 退款/售后 </view> </view> <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange"> <!-- 待支付 --> <swiper-item> <view class="orderInfo" wx:if="{{payOrderListNum}}"> <scroll-view scroll-y="true" style="height:{{winHeight - 90}}px"> <block wx:for="{{payOrderList}}" wx:key="{{index}}"> <view class="orderInfo-item"> <navigator open-type="navigate" url="{{waitePayment}}?orderId={{item.id}}" hover-class="none"> <view class="itemInfo"> <image class="itemInfoImg" src="{{imgUrl}}{{item.storePath}}"></image> <view class="serviceShop"> <text class="shopName">{{item.storeName}}</text> <text class="serviceTime">{{item.createDate}}</text> <view class="ItemsMoney"> <view class="serviceItem"> <text class="detailedText">{{item.showPageService}}</text> <image class="detailedImg" src="../../images/enterImg.png"></image> </view> <text class="serviceMoney">￥{{item.payAmount}}</text> </view> </view> </view> </navigator> <view class="buttonBox"> <image class="diszf" data-orderId='{{item.id}}' src="../../images/diszf.png" bindtap='showdiszf'></image> <image wx:if="{{!item.isPay}}" data-orderId='{{item.id}}' data-payMethod='{{item.payMethod}}' class="zf" src="../../images/zf.png" bindtap='showPassword'></image> </view> </view> </block> </scroll-view> </view> <view class="noOrderInfo" wx:else>还没有订单信息快去下单吧</view> </swiper-item> <!-- 待服务 --> <swiper-item> <view class="orderInfo" wx:if="{{payOrderListNum}}"> <scroll-view scroll-y="true" style="height:{{winHeight - 90}}px"> <block wx:for="{{payOrderList}}" wx:key="{{index}}"> <view class="orderInfo-item"> <navigator open-type="navigate" url="{{waitePayment}}?orderId={{item.id}}" hover-class="none"> <view class="itemInfo"> <image class="itemInfoImg" src="{{imgUrl}}{{item.storePath}}"></image> <view class="serviceShop"> <text class="shopName">{{item.storeName}}</text> <text class="serviceTime">{{item.createDate}}</text> <view class="ItemsMoney"> <view class="serviceItem"> <text class="detailedText">{{item.showPageService}}</text> <image class="detailedImg" src="../../images/enterImg.png"></image> </view> <text class="serviceMoney">￥{{item.payAmount}}</text> </view> </view> </view> </navigator> <view class="buttonBox"> <image class="diszf" data-orderId='{{item.id}}' src="../../images/diszf.png" bindtap='showdiszf'></image> <image wx:if="{{!item.isPay}}" data-orderId='{{item.id}}' data-payMethod='{{item.payMethod}}' class="zf" src="../../images/zf.png" bindtap='showPassword'></image> </view> </view> </block> </scroll-view> </view> </swiper-item> <!-- 已完成 --> <swiper-item> <!-- 同上 --> </swiper-item> <!-- 退款/售后 --> <swiper-item> <!-- 同上 --> </swiper-item> </swiper>

wxss：

.swiper-tab { width: 100%; border-bottom: 2rpx solid #777777; text-align: center; line-height: 80rpx; } .swiper-tab-list { font-size: 30rpx; display: inline-block; width: 25%; color: #777777; } .on { color: #da7c0c; border-bottom: 5rpx solid #da7c0c; } .swiper-box { display: block; height: 100%; width: 100%; overflow: hidden; } .swiper-box view { text-align: center; } .orderInfo { width: 100%; } .orderInfo-item { width: 690rpx; margin-top: 18rpx; padding: 20rpx 30rpx; background: white; } .itemInfo { display: flex; flex-direction: row; } .itemInfoImg { width: 150rpx; height: 150rpx; } .serviceShop { width: 540rpx; margin-left: 20rpx; font-size: 32rpx; display: flex; flex-direction: column; justify-content: flex-start; border-bottom: 1px dashed #E6e6e6; } .shopNaRe { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .shopName { color: #333333; font-weight: 600; } .shopResult { color: #94979f; font-size: 24rpx; } .serviceTime { color: #94979f; font-size: 26rpx; margin: 8rpx; } .ItemsMoney { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .serviceItem { display: flex; flex-direction: row; align-items: center; } .detailedText { font-size: 26rpx; color: #333333; margin-right: 16rpx; } .detailedImg { width: 10rpx; height: 16rpx; } .serviceMoney { font-size: 34rpx; font-weight: 600; } .buttonBox { display: flex; flex-direction: row; justify-content: flex-end; margin-top: 20rpx; } .buttonBox image { width: 120rpx; height: 50rpx; margin-left: 26rpx; } /* 没有订单 */ .noOrderInfo { display: flex; flex-direction: column; align-items: center; width: 750rpx; height: 100%; background: #ffffff; margin-top: 10rpx; } .noOrdersImg { wdith: 300rpx; margin-top: 80rpx; margin-bottom: 40rpx; } .noOrderTtext { color: #333333; font-size: 28rpx; }

 js：

var app = getApp() Page({ data: { imgUrl: app.imgUrl, requestUrl: app.contextPath + "/order/getUserOrderList", moreOrder: "../../../allOrder/allOrder", waitePayment: "../../../waitePayment/waitePayment", waiteService: "../../../waiteService/waiteService", finished: "../../../finished/finished", refund: "../../../refund/refund", apply: "../../../refundApplyOf/refundApplyOf", winWidth: 0, winHeight: 0, // tab切换 currentTab: 0, //待支付 OrderPlaced: 'OrderPlaced', //待服务 PendingService: 'PendingService', //已完成 confirmation: 'confirmation', //售后 Refund: 'Refund' }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { wx.hideShareMenu(); var that = this; that.setData({ payOrderListNum: true, }) // 获取系统信息 wx.getSystemInfo({ success: function(res) { that.setData({ winWidth: res.windowWidth, winHeight: res.windowHeight }); } }); that.setData({ currentTab: app.orderTag }); switch (app.orderTag) { case 0: // 订单列表接口 this.orderPlacedlist(); break; case 1: // 订单列表接口 this.pendingServicelist(); break; case 2: // 订单列表接口 this.confirmation(); break; case 3: // 订单列表接口 this.refund(); break; } }, /* 滑动切换tab */ bindChange: function(e) { var that = this; that.setData({ currentTab: e.detail.current, payOrderListNum: true, waiteServiceListNum: true, finishOrderListNum: true, refundListNum: true }); app.orderTag = e.detail.current; switch (this.data.currentTab) { case 0: // 订单列表接口 this.orderPlacedlist(); break; case 1: // 订单列表接口 this.pendingServicelist(); break; case 2: // 订单列表接口 this.confirmation(); break; case 3: // 订单列表接口 this.refund(); break; } }, /* 点击tab切换 */ swichNav: function(e) { var that = this; that.setData({ payOrderListNum: true, waiteServiceListNum: true, finishOrderListNum: true, refundListNum: true }) if (this.data.currentTab === e.target.dataset.current) { return false; } else { that.setData({ currentTab: e.target.dataset.current }) app.orderTag = e.detail.current; } }, /* 待支付列表 */ orderPlacedlist: function() { var that = this; /* 订单列表接口 */ wx.request({ url: that.data.requestUrl, data: { status: that.data.OrderPlaced }, header: { 'content-type': 'application/json', '_telphone': wx.getStorageSync("_telphone"), '_token': wx.getStorageSync("_token") }, success: function(res) { if (res.data.VALUE.length >= 1) { that.setData({ payOrderList: res.data.VALUE, payOrderListNum: true }) } else { that.setData({ payOrderList: [], payOrderListNum: false }) } } }) }, /* 待服务列表 */ pendingServicelist: function() { var that = this; // 订单列表接口 wx.request({ url: that.data.requestUrl, data: { status: that.data.PendingService }, header: { 'content-type': 'application/json', '_telphone': wx.getStorageSync("_telphone"), '_token': wx.getStorageSync("_token") }, success: function(res) { that.setData({ waiteServiceList: res.data.VALUE }) if (res.data.VALUE.length >= 1) { that.setData({ waiteServiceListNum: true }) } else { that.setData({ waiteServiceList: [], waiteServiceListNum: false }) } } }) }, /* 已完成列表 */ confirmation: function() { var that = this; // 订单列表接口 wx.request({ url: that.data.requestUrl, data: { status: that.data.confirmation }, header: { 'content-type': 'application/json', '_telphone': wx.getStorageSync("_telphone"), '_token': wx.getStorageSync("_token") }, success: function(res) { that.setData({ finishOrderList: res.data.VALUE }) if (res.data.VALUE.length >= 1) { that.setData({ finishOrderListNum: true }) } else { that.setData({ finishOrderList: [], finishOrderListNum: false }) } } }) }, /* 退款/售后列表 */ refund: function() { var that = this; // 订单列表接口 wx.request({ url: that.data.requestUrl, data: { status: that.data.Refund }, header: { 'content-type': 'application/json', '_telphone': wx.getStorageSync("_telphone"), '_token': wx.getStorageSync("_token") }, success: function(res) { that.setData({ refundList: res.data.VALUE }) if (res.data.VALUE.length >= 1) { refundListNum: true } else { that.setData({ refundList: [], refundListNum: false }) } } }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { }, /** * 生命周期函数--监听页面显示 */ onShow: function() { if (!this.data.isClose) { this.onLoad(); } }, /** * 生命周期函数--监听页面隐藏 */ onHide: function() { this.setData({ isClose: false, }); }, /** * 生命周期函数--监听页面卸载 */ onUnload: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, /** * 用户点击右上角分享 */ onShareAppMessage: function() { } })