微信小程序，我的订单（待付款和选项卡）

首先是wxml,由于后台一直没有写接口，用的都是假数据，不过大致功能是实现了的

//选项卡
<view class="swiper-tab">
   <view  wx:for="{{tabs}}" wx:key class="swiper-tab-item 
       {{currentTab==index?'active':''}}" data-current="{{index}}" bindtap="clickTab">
       <text>{{item}}</text>
   </view>
</view>
<!--内容-->
<swiper current="{{currentTab}}"  bindchange="swiperTab" style="margin-top: 
  100rpx;height: {{scrollHeight}}px;">
      <swiper-item style="margin: 10rpx 0;height: 100%;">//待收货
           //滑动
         <scroll-view class="scroll-y" scroll-y style='height:{{scrollHeight}}px' 
           bindscrolltolower="onReachBottom">//判断有没有内容
             <view wx:if="{{Paymentlist.length===0}}" style="width: 100%;height: 100vh;">
                 <image style="width: 100%;height: 100%;" src="/Images/8.png"></image> 
             </view>
             <view wx:else>
                <view class="con_first" wx:for="{{Paymentlist}}">
                   <view style="display: flex;" bindtap="detail" data-index="{{item}}">
                      <view>乐优直采</view>
                      <view bindtap="ddfk" style="flex: 1;text-align: end;">
                         等待付款
                       </view>
                   </view>
                   //判断从购物车购买的还是直接购买的
                   <view wx:if="{{item.goods.length!=0}}">
                    //判断从购物车购买的是一件还是多件 1件的样式
                     <view  wx:if="{{item.goods.length===1}}" bindtap="detail" data- 
                       index="{{item}}" >
                        <view wx:for="{{item.goods}}" style="display: flex;" >
                          <image style="width:130rpx;height: 130rpx;" src="{{item.url}}"> 
                           </image>
                           <view style="margin-left: 10rpx;margin-top:10rpx;">
                              <view>{{item.title}}</view>
                              <view style="color: #ea4233;">￥{{item.price}}</view>
                           </view>
                           <view style="flex: 1;margin-top: 50rpx">
                               <view>×{{item.num}}</view>
                            </view>
                          </view>
                          <view style="display: flex;">
                            <view style="flex: 1;text-align: end;">应付￥ 
                                 {{item.totalPrice}}</view>
                            </view>
                          </view>
                           //多件的样式
                          <view wx:else style="position: relative;">
                             <view style="display: flex; data-index="{{item}}">
                               <view  wx:for="{{item.goods}}"  >
                                  <image style="width: 130rpx;height: 130rp " src=" 
                                   {{item.url}}"></image>
                                </view>
                              </view>
                              <view  data-index="{{item}}"bindtap="bindViewTab">
                                   共{{item.number}}件>
                              </view>
                              <view style="display: flex;" bindtap="detail" data- 
                               index="{{item}}" >
                                <view style="flex: 1;text-align: end;">应付￥ 
                                 {{item.totalPrice}}</view>
                              </view>
                          </view> 
                        </view>
                        <view bindtap="detail" data-index="{{item}}" wx:else=" 
                           {{item.buynowo.length!=0}}">//商品页面直接购买
                            <view wx:for="{{item.buynowo}}" style="display: flex; margin: 
                            40rpx 0;">
                                <image style="border-radius: 10rpx;width: 130rpx;height: 
                                  130rpx;" src="{{item.url}}"></image>
                                <view style="margin-left: 10rpx;margin-top: 10rpx;font- 
                               size: 15px;">
                                <view>{{item.title}}</view>
                                <view style="color: #ea4233;margin-top: 15rpx;">￥ 
                                 {{item.price}}</view>
                                </view>
                                <view style="flex: 1;margin-top: 50rpx;color: rgb(190, 
                                  189, 189);text-align: right;">
                                   <view>×{{item.num}}</view>
                                </view>
                            </view>
                            <view style="display: flex;" wx:for="{{item.buynowo}}">
                                <view style="flex: 1;text-align: end;">应付￥ 
                                 {{item.price*item.num}}</view>
                            </view>
                        </view>
                        <view style="display: flex;border-top: 1px solid rgb(233, 229, 
                         229);margin-top: 30rpx;">
                            <view style="flex: 1;text-align: end;">
                                <text class="con_zise" bindtap="cancellation" data- 
                                index="{{index}}">取消订单</text>
                                <text class="con_zise" bindtap="detail" data-index=" 
                                {{item}}" style="margin-left: 20rpx;">查看详情</text>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>   
        </swiper-item>
        <swiper-item >//待收货
            <view style="width: 100%;height: 100%;"><image style="width: 100%;height: 
             100%;" src="/Images/8.png"></image></view>
        </swiper-item>
       <swiper-item >//已完成
            <view style="width: 100%;height: 100%;"><image style="width: 100%;height: 
             100%;" src="/Images/8.png"></image></view>
        </swiper-item>
        <swiper-item >//已取消
            <view style="width: 100%;height: 100%;"><image style="width: 100%;height: 
             100%;" src="/Images/8.png"></image></view>
        </swiper-item>
</swiper>

现在开启他的js

onLoad: function (options) {
   setInterval(() => { 
      var Paymentlist =  wx.getStorageSync('payment')  //代付款数据
        
      this.setData({
         Paymentlist:Paymentlist,
        
        })
      },100)
     
 },
//滑动切换
swiperTab:function( e ){
    var that=this;
    that.setData({
      currentTab:e.detail.current
    });
  },
//点击切换
clickTab: function( e ) { 
  
    var that = this; 
  
    if( this.data.currentTab === e.target.dataset.current ) { 
     return false; 
    } else { 
     that.setData( { 
      currentTab: e.target.dataset.current 
     }) 
    } 
   } ,
   
onShow: function () {
        this.setData({
          scrollHeight: wx.getSystemInfoSync().windowHeight - 
        (wx.getSystemInfoSync().windowWidth / 750 * 100),
        })
          if (app.globalData.currentLocation == '') {   //“我的”选项卡前一页点击
            this.setData({        
                currentTab: 0
        });
      } else {     
      var i = app.globalData.currentLocation;      
      this.setData({        
          currentTab: i
        });
      }
 

    },

wxss

/* 导航样式*/
.swiper-tab {
    position: fixed;
    margin-top: 20px;
    width: 93.5%;
    margin-left: 25rpx;
    line-height: 90rpx;
    z-index: 99;
    justify-content: center;
    align-items: center;
    background: #fff;
    left: 0;
    margin-top: 13rpx;
    display: flex;
    font-size: 14px;
    border-radius: 10rpx;
  }
  .swiper-tab-item {
   width: 50%;
    /* padding: 0rpx 50rpx; */
    justify-content: center;
    align-items: center;
    text-align: center;
    /* background-color: #fff; */
  }
  .active{
    border-bottom: 4rpx solid red;
    font-weight: bolder;
  }
  /* 内容 */
  .con_first{
    width: 100%;
    padding: 20rpx;
    background-color: #fff;
    margin-top: 20rpx;
  }
  .con_zise{
    border: 1px solid rgb(117, 116, 116);
    padding: 12rpx 18rpx;
    border-radius: 100rpx;
  }