[更新发现]

pages/menu/classify.vue

@@ -1,14 +1,23 @@
 <template>
     <view class="content">
-        <view class="tabs">
-            <u-tabs :current="tabsIndex" :list="tabArr" @change="tabsClick" lineColor="#34CE98" :activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"></u-tabs>
-        </view>
+        <u-sticky bgColor="#fff" zIndex="99">
+            <u-tabs
+                :current="tabsIndex"
+                :list="tabArr"
+                @change="tabsClick"
+                lineColor="#34CE98"
+                :activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"
+            />
+        </u-sticky>
         <view class="box">
             <oct-menu
                 :lists="menuData"
                 :btnStyle="{'padding': '30rpx'}"
-                @onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.id, title: $event.name, title: $event.index }})" 
+                @onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.recipe_id, title: $event.name, title: $event.index }})" 
             />
+            <block v-if="page.total_page > 1">
+                <u-loadmore :status="status" />
+            </block>
         </view>
     </view>
 </template>
@@ -20,31 +29,60 @@
             return {
                 tabArr      : [],
                 menuData    : [],
-                tabsIndex   : this.$Route.query.index
+                tabsIndex   : this.$Route.query.index,
+                tabsId      : this.$Route.query.id,
+                status      : 'loadmore',
+                page        : ''
             };
         },
         mounted() {
+            // 获取分类
         	this.getTab()
-            this.getMenu(this.$Route.query.id)
+            
+            // 获取列表
+            this.getMenu()
         },
         methods: {
+            // 分类
             getTab(){
             	categories().then(res => {
                     this.tabArr = res
             	})
             },
             
-            getMenu(id){
+            // 列表
+            getMenu(pages){
             	queue({
-                    category_id: id
+                    category_id: this.tabsId,
+                    page: pages
                 }).then(res => {
-                    this.menuData = res.data
+                    if(res.page.current == 1){
+                        this.menuData = []
+                    }
+                    this.menuData = this.menuData.concat(res.data)
+                    this.status   = this.page.has_more ? 'loadmore': 'nomore'
+                    this.page     = res.page
             	})
             },
+            
+            // 切换分类
             tabsClick(item) {
-                this.getMenu(item.category_id)
+                this.tabsId    = item.category_id
                 this.tabsIndex = item.index
+                this.getMenu(1)
             }
+        },
+        
+        // 下拉加载
+        onReachBottom() {
+            if(this.page.has_more){
+                this.status = 'loading'
+                let pages = this.page.current + 1
+                // 获取列表
+                this.getMenu(pages)
+                return
+            }
+            this.status = 'nomore'
         }
     };
 </script>
@@ -63,6 +101,7 @@
     .box {
         padding: 0 $padding;
         box-sizing: border-box;
+        margin-top: $margin;
     }
     // 34CE98
 </style>