静态页面

src/components/common/TabSwiper/index.vue

         <swiper :options="SwiperOptions" ref="MySwiper">
           <swiper-slide v-for="(item, index) in List" :key="index">
             <div class="SwiperItem">
-              <scroller :on-refresh="Refresh">
+              <scroller :on-refresh="Refresh" :on-infinite="Infinite">
                 <div class="Container">
                   <slot :name="`SwiperItem-${item.id}`"></slot>
                 </div>
     },
     Refresh (done) { // 页面下拉刷新
       this.$emit('Refresh', { done, id: this.NavActiveId })
+    },
+    Infinite (done) { // 页面上拉加载
+      this.$emit('Infinite', { done, id: this.NavActiveId })
     }
   }
 }

src/pages/KaiJiangZhanShi/LanQiu/index.vue

     <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="篮球开奖">
       <div class="PageContainer flex-v">
         <!-- 开奖日期 -->
-        <div class="Time" v-if="NewstRes !== null">
+        <!-- <div class="Time" v-if="NewstRes !== null">
           <div class="Icon">
             <img src="../../../assets/img/icon6.png" class="centerLabel contain" alt="">
           </div>
           <span>{{ToolClass.FormatDate(NewstRes.createDate, 'yyyy-MM-dd')}}</span>
           <span>{{NewstRes.matchWeek}}</span>
-        </div>
+        </div> -->
 
         <div class="flex-item">
           <div>
 
             <!-- nav -->
-            <TabSwiper :List="NavList" @Refresh="Refresh" @Change="TabChange">
+            <TabSwiper :List="NavList" @Refresh="Refresh" @Infinite="Infinite" @Change="TabChange">
 
               <!-- 胜负 -->
               <div slot="SwiperItem-1" class="Item">
                 <ul>
-                  <li v-for="(item, index) in LotterySportRes" :key="index" v-if="item.lotteryId === 'basketball'" class="flex-h">
+                  <li v-for="(item, index) in LotterySportRes" :key="index" v-if="item.playOdds['bst-wl'] !== undefined" class="flex-h">
                     <div class="From">
                       <span>{{item.leagueName}}</span>
                       <span>{{item.matchWeek}}</span>
                         <span>{{item.awayTeamName}}</span>
                       </div>
                       <div class="flex-item">
-                        <span class="Small">{{item.diffScore > 0 ? '胜' : '负'}}</span>
+                        <span class="Small">{{!item.playOdds['bst-wl'][0].isWinning ? '胜' : '负'}}</span>
                         <span class="Big">{{item.wholeScore}}</span>
                       </div>
                       <div class="flex-item">
               <!-- 让分胜负 -->
               <div slot="SwiperItem-2" class="Item">
                 <ul>
-                  <li v-for="(item, index) in LotterySportRes" :key="index" v-if="item.lotteryId === 'basketball'" class="flex-h">
+                  <li v-for="(item, index) in LotterySportRes" :key="index" v-if="item.playOdds['bst-wls'] !== undefined" class="flex-h">
                     <div class="From">
                       <span>{{item.leagueName}}</span>
                       <span>{{item.matchWeek}}</span>
                         <span>{{item.awayTeamName}}</span>
                       </div>
                       <div class="flex-item">
-                        <span class="Small">{{item.diffScore > item.spreadPoints ? `让胜（${item.spreadPoints}）` : `让负（${item.spreadPoints}）`}}</span>
+                        <span class="Small">{{!item.playOdds['bst-wls'][0].isWinning ? `让胜（${item.spreadPoints}）` : `让负（${item.spreadPoints}）`}}</span>
                         <span class="Big">{{item.wholeScore}}</span>
                       </div>
                       <div class="flex-item">
               <!-- 胜分差 -->
               <div slot="SwiperItem-3" class="Item">
                 <ul>
-                  <li v-for="(item, index) in LotterySportRes" :key="index" v-if="item.lotteryId === 'basketball'" class="flex-h">
+                  <li v-for="(item, index) in LotterySportRes" :key="index" v-if="item.playOdds['bst-points'] !== undefined" class="flex-h">
                     <div class="From">
                       <span>{{item.leagueName}}</span>
                       <span>{{item.matchWeek}}</span>
                         <span>{{item.awayTeamName}}</span>
                       </div>
                       <div class="flex-item">
-                        <span class="Small">{{item.diffScore > 0 ? '胜' : '负'}}</span>
+                        <span class="Small" v-for="(subItem, subIndex) in item.playOdds['bst-points']" :key="subIndex" v-if="subItem.isWinning">{{subItem.name.substring(0, 1) === '胜' ? '负' : '胜'}}{{subItem.name.substring(1)}}</span>
                         <span class="Big">{{item.wholeScore}}</span>
                       </div>
                       <div class="flex-item">
               <!-- 大小分 -->
               <div slot="SwiperItem-4" class="Item">
                 <ul>
-                  <li v-for="(item, index) in LotterySportRes" :key="index" v-if="item.lotteryId === 'basketball'" class="flex-h">
+                  <li v-for="(item, index) in LotterySportRes" :key="index" v-if="item.playOdds['bst-score'] !== undefined" class="flex-h">
                     <div class="From">
                       <span>{{item.leagueName}}</span>
                       <span>{{item.matchWeek}}</span>
                         <span>{{item.awayTeamName}}</span>
                       </div>
                       <div class="flex-item">
-                        <span class="Small">{{item.diffScore > 0 ? '胜' : '负'}}</span>
+                        <span class="Small" v-for="(subItem, subIndex) in item.playOdds['bst-score']" :key="subIndex" v-if="subItem.isWinning">{{subItem.name}}({{item.presetPoints}})</span>
                         <span class="Big">{{item.wholeScore}}</span>
                       </div>
                       <div class="flex-item">
   name: '',
   data () {
     return {
+      PageData: {
+        pageNum: 0,
+        pageSize: 15
+      },
+      HasNextPage: true,
+      DataLock: false,
       NewstRes: null,
       NavList: [ // nav数据
         { name: '胜负', id: 1 },
     ...mapIndexMutations([
       'EmptyLotterySportRes'
     ]),
-    Init () {
+    Init (done = () => { }) {
       this.EmptyLotterySportRes()
-      this.GetLotterySportRes({ queryData: { lotteryId: 'basketball', pageNum: 1, pageSize: 100 } }).then(() => {
-        this.LotterySportRes.map((item) => {
-          if (item.lotteryId === 'basketball') {
-            this.NewstRes = { ...item }
-          }
-        })
+      this.PageData.pageNum = 0
+      this.HasNextPage = true
+    },
+    ToGetLotterySportRes (done = () => { }, num = null) {
+      if (!this.HasNextPage && this.DataLock) return
+      this.DataLock = true
+      if (num !== null) {
+        this.PageData.pageNum += num
+      }
+      this.GetLotterySportRes({ queryData: { lotteryId: 'basketball', ...this.PageData } }).then((res) => {
+        this.HasNextPage = res.data.data.pages > this.PageData.pageNum
+        this.DataLock = false
+        done()
+      }).catch(() => {
+        this.DataLock = false
+        done()
       })
     },
     TabChange (e) { // nav切换
 
     },
     Refresh (e) { // 页面下拉刷新
-      window.setTimeout(() => {
+      this.Init(e.done)
+    },
+    Infinite (e) { // 页面上拉加载
+      if (this.HasNextPage && !this.DataLock) {
+        this.ToGetLotterySportRes(e.done, 1)
+      } else {
         e.done()
-      }, 1000)
+      }
     }
   }
 }

src/pages/KaiJiangZhanShi/LanQiu/page.scss

               border-bottom: 0.01rem solid #f7f7f7;
               padding: 0.15rem 0;
               > .From {
-                margin-right: 0.2rem;
+                margin-right: 0.1rem;
                 > span {
                   display: block;
                   text-align: left;