[更新发现]

pages/topic/index.vue

@@ -1,69 +1,90 @@
 <template>
     <view class="content">
-        <view class="tabs">
+        <u-sticky bgColor="#fff" zIndex="99">
             <u-tabs
-                :list="list1"
-                @click="click"
+                :list="listArr"
+                @click="changeTopic"
                 lineColor="#34CE98"
                 :activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"
             />
-        </view>
-        <view class="topic">
+        </u-sticky>
+        <view class="topic" v-if="topicArr.length > 0">
             <oct-topic
                 :lists="topicArr"
-                @onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.id }})" 
+                @onTopic="$Router.push({ name: 'topicDetails', params: {id: $event.topic_id, title: $event.name }})" 
+            />
+            <block v-if="page.total_page > 1">
+                <u-loadmore :status="status" />
+            </block>
+        </view>
+        <view class="noTopic" v-else>
+            <u-empty
+                mode="list"
+                text="暂无食谱"
             />
         </view>
     </view>
 </template>
 
 <script>
+    import { lists, categories } from '@/apis/interfaces/topic'
     export default {
         data() {
             return {
-                list1: [{
-                    name: '慢病护理',
-                }, {
-                    name: '减肥塑性',
-                }, {
-                    name: '心理健康'
-                }, {
-                    name: '女性健康'
-                }, {
-                    name: '健康养生'
-                }, {
-                    name: '其他'
-                }],
-                topicArr: [{
-                    id: 1,
-                    title: '坚持做瑜伽可以减肥吗',
-                    read: '100',
-                    praise: '100',
-                    cover: 'http://up.boohee.cn/house/u/mboohee/img/others/7.2.jpg'
-                },{
-                    id: 2,
-                    title: '有没有减肥秘诀/减肥偏方/减肥窍门',
-                    read: '100',
-                    praise: '100',
-                    cover: 'http://up.boohee.cn/house/u/mboohee/img/others/yundong1.jpg'
-                },{
-                    id: 3,
-                    title: '只需2招迅速变出小蛮腰',
-                    read: '100',
-                    praise: '100',
-                    cover: 'http://up.boohee.cn/house/u/mboohee/img/others/yundong2.jpg'
-                },{
-                    id: 3,
-                    title: '有效方便的减肥方法有哪些',
-                    read: '100',
-                    praise: '100',
-                    cover: 'http://up.boohee.cn/house/u/mboohee/img/others/jian.jpg'
-                }]
+                listArr     : [],
+                topicArr    : [],
+                categoryId  : '',
+                status      : 'loadmore',
+                page        : ''
             }
         },
-        onLoad() {},
-        methods: {
+        mounted() {
+            // 获取分类
+            this.getCategories()
             
+            // 获取列表
+            this.getTopic()
+        },
+        methods: {
+            // 分类
+            getCategories(){
+            	categories().then(res => {
+                    this.listArr = res
+            	})
+            },
+            
+            // 列表
+            getTopic(categoryId, pages){
+            	lists({
+                    category_id: categoryId,
+                    page: pages
+                }).then(res => {
+                    if(res.page.current == 1){
+                        this.topicArr = []
+                    }
+                    this.topicArr = this.topicArr.concat(res.data)
+                    this.status   = this.page.has_more ? 'loadmore': 'nomore'
+                    this.page     = res.page
+            	})
+            },
+            
+            // 切换分类
+            changeTopic(item) {
+                // 获取列表
+                this.getTopic(item.category_id, 1)
+            }
+        },
+        
+        // 下拉加载
+        onReachBottom() {
+            if(this.page.has_more){
+                this.status = 'loading'
+                let pages = this.page.current + 1
+                // 获取列表
+                this.getTopic('', pages)
+                return
+            }
+            this.status = 'nomore'
         }
     };
 </script>
@@ -105,4 +126,16 @@
         padding: 0 $padding;
         box-sizing: border-box;
     }
+    
+    .noTopic {
+        background-color: white;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-box-pack: center;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    }
 </style>