edit

src/App.vue

@@ -1,35 +1,44 @@
 <template>
     <div id="app">
         <view-box ref="viewBox">
-            <x-header slot="header">
+            <x-header slot="header" class="header">
                 <div slot="overwrite-left">直播</div>
                 <div>网易</div>
                 <div slot="right">搜索</div>
             </x-header>
 
+            <sc
+                :lock-y="true"
+                @touchstart.native.stop=""
+                @touchmove.native.stop=""
+                @touchend.native.stop=""
+                @mousedown.native.stop=""
+                @mousemove.native.stop=""
+                @mouseup.native.stop=""
+                class="sc"
+            >
+                <div class="wy-tab">
+                    <tab>
+                        <tab-item
+                            v-for="category in categories"
+                            :selected="category.key == categoryKey"
+                            :key="category.key"
+                        >
+                            {{category.name}}
+                        </tab-item>
+                    </tab>
+                </div>
+            </sc>
+
             <!-- :on-refresh="refresh"
             :on-infinite="infinite" -->
             <scroller
+                class="my-scroller"
                 ref="myScroller"
-                style="top: 46px;"
+                :on-refresh="refresh"
+                :on-infinite="infinite"
             >
 
-                <sc
-                    :lock-y="true"
-                    @touchstart.native.stop=""
-                    @touchmove.native.stop=""
-                    @touchend.native.stop=""
-                    @mousedown.native.stop=""
-                    @mousemove.native.stop=""
-                    @mouseup.native.stop=""
-                >
-                    <div class="wy-tab">
-                        <tab>
-                            <tab-item selected>头条</tab-item>
-                        </tab>
-                    </div>
-                </sc>
-
                 <router-view></router-view>
 
             </scroller>
@@ -39,15 +48,15 @@
                     <img slot="icon" src="./assets/icon_nav_button.png">
                     <span slot="label">Wechat</span>
                 </tabbar-item>
-                <tabbar-item show-dot>
+                <tabbar-item>
                     <img slot="icon" src="./assets/icon_nav_msg.png">
                     <span slot="label">Message</span>
                 </tabbar-item>
-                <tabbar-item selected link="/component/demo">
+                <tabbar-item>
                     <img slot="icon" src="./assets/icon_nav_article.png">
                     <span slot="label">Explore</span>
                 </tabbar-item>
-                <tabbar-item badge="2">
+                <tabbar-item>
                     <img slot="icon" src="./assets/icon_nav_cell.png">
                     <span slot="label">News</span>
                 </tabbar-item>
@@ -64,7 +73,16 @@ const refreshKey = ['A', 'B01', 'B02', 'B03', 'B04', 'B05', 'B06', 'B07', 'B08',
 let refreshKeyIndex = 0;
 let page =0;
 let prepage = 10;
-let initLoaded = false;
+let firstLoaded = false;
+let moreLoaded = true;
+function getRefreshKey() {
+    refreshKeyIndex++;
+    if (refreshKeyIndex >= refreshKey.length) {
+        refreshKeyIndex = 0;
+    }
+    return refreshKey[refreshKeyIndex];
+}
+//let initLoaded = false;
 
 export default {
     name: 'app',
@@ -77,121 +95,61 @@ export default {
         Tabbar,
         TabbarItem
     },
-    data() {
-        return {
-        }
+    mounted() {
+        this.$store.dispatch('getTopList').then(() => {
+            setTimeout(() => {
+                firstLoaded = true;
+            }, 300);
+        });
     },
-    
-    created() {
-        // console.log(this.$jsonp);
-        // console.log('created');
-        // Vue.jsonp('http://3g.163.com/touch/jsonp/sy/recommend/0-9.html', {
-        //     miss:'00',
-        //     refresh:'B01'
-        // this.$jsonp('http://3g.163.com/touch/jsonp/sy/recommend/0-9.html').then(json => {
-        //     console.log(json);
-        //     // 焦点图
-        //     json.focus.forEach(item => {
-        //         if (item.addata === null) {
-        //             this.slideData.push({
-        //                 url: item.link,
-        //                 img: item.picInfo[0].url,
-        //                 title: item.title
-        //             });
-        //         }
-        //     });
-        //
-        //     //首屏列表数据
-        //     json.list.forEach(item => {
-        //         if (item.addata === null) {
-        //             this.list.push({
-        //                 url: item.link,
-        //                 src: item.picInfo[0].url,
-        //                 title: item.title
-        //             });
-        //             initLoaded = true;
-        //         }
-        //     });
-        // }).catch(err => {
-        //     console.log(err);
-        // })
+    computed: {
+        categoryKey() {
+            return this.$store.getters.categoryKey;
+        },
+        categories() {
+            return this.$store.getters.categories;
+        }
     },
     methods: {
-        slideDataIndexChange (index) {
-            this.slideIndex = index
+        refresh() {
+            setTimeout(() => {
+                this.$store.dispatch('refreshTopList', {
+                    refreshKey: getRefreshKey()
+                })
+                .then(n => {
+                    this.$refs.myScroller.finishPullToRefresh();
+                    // this.$vux.toast.show({
+                    //     text: '成功为您推荐10条新内容'
+                    // });
+                    this.$vux.toast.text(`成功为您推荐${n}条新内容`, 'top');
+                })
+            }, 1000);
         },
-
-        refresh(done) {
-            // console.log('refresh');
-            // console.log(this.$refs.myScroller.finishPullToRefresh);
-
-            // setTimeout(() => {
-            //     console.log('时间到');
-            //     this.$refs.myScroller.finishPullToRefresh();
-            // }, 2000)
-
-            refreshKeyIndex++;
-            if (refreshKeyIndex == refreshKey.length) {
-                refreshKeyIndex = 0;
-            }
-            this.$jsonp('http://3g.163.com/touch/jsonp/sy/recommend/0-9.html', {
-                miss: '00',
-                refresh: refreshKey[refreshKeyIndex]
-            })
-            .then( json => {
-                setTimeout(() => {
-                this.list = [];
-                json.list.forEach(item => {
-
-                        if (item.addata === null) {
-                            this.list.push({
-                                url: item.link,
-                                src: item.picInfo[0].url,
-                                title: item.title
-                            });
-                        }
-                        this.$refs.myScroller.finishPullToRefresh();
-                        this.$vux.toast.text('更新成功', 'top');
-
-                });
-                }, 2000);
-            } )
-
-
-        },
-
         infinite() {
-            console.log(initLoaded);
-            if (!initLoaded) {
-                console.log('infinite one');
+            if (!firstLoaded) {
                 this.$refs.myScroller.finishInfinite();
                 return;
             }
-            console.log('infinite');
-
-            let start = page * prepage;
-            let end = start + prepage;
-
-            this.$jsonp('http://3g.163.com/touch/jsonp/sy/recommend/'+start+'-'+end+'.html')
-            .then( json => {
-                // return;
-                // this.listMore = [];
-                setTimeout(() => {
-                    json.list.forEach(item => {
-                        if (item.addata === null) {
-                            this.listMore.push({
-                                url: item.link,
-                                src: item.picInfo[0].url,
-                                title: item.title
-                            });
-                        }
-                        this.$refs.myScroller.finishInfinite();
-                        this.$vux.toast.text('更新成功', 'top');
-                    });
-                }, 2000)
-            } )
+            if (!moreLoaded) {
+                return;
+            }
+            // console.log(moreLoaded);
+            // console.log('infinite');
+            moreLoaded = false;
+            page++;
+            setTimeout(() => {
+                this.$store.dispatch('loadMoreList', {
+                    refreshKey: refreshKey[refreshKeyIndex],
+                    page,
+                    prepage
+                })
+                .then(() => {
+                    this.$refs.myScroller.finishInfinite();
+                    // this.$vux.toast.text('加载成功', 'top');
+                    moreLoaded = true;
+                })
+            }, 1000);
         }
-
     }
 }
 </script>
@@ -202,30 +160,34 @@ export default {
 html, body {
    height: 100%;
    width: 100%;
-   overflow-x: hidden;
+   overflow: hidden;
  }
+
  #app {
      height: 100%;
- }
-
-.wy-tab {
-  height: 44px;
-  position: relative;
-  width: 1110px;
-}
 
+     .header {
+         width: 100%;
+         position: absolute;
+         z-index: 9;
+         left: 0;
+         top: 0;
+     }
+
+     .sc {
+         position: absolute;
+         top: 46px;
+     }
+
+     .wy-tab {
+       height: 44px;
+       position: relative;
+       width: 1110px;
+     }
+
+     .my-scroller {
+         top: 90px;
+     }
+ }
 
-.panel-list .weui-media-box_appmsg .weui-media-box__hd, .panel-list .weui-media-box_appmsg .weui-media-box__hd img {
-    width: 102px;
-    height: 78px;
-}
-.panel-list .weui-media-box_appmsg .weui-media-box__bd {
-    height: 78px;
-}
-.panel-list .weui-media-box__title {
-    white-space: normal;
-}
-.loading-layer {
-    padding-bottom: 50px;
-}
 </style>

src/components/Main.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="main">
-        <!-- <swiper
+        <swiper
             :list="slideData"
             v-model="slideIndex"
-            @on-index-change="slideDataIndexChange"
+            :loop="true"
             @touchstart.native.stop=""
             @touchmove.native.stop=""
             @touchend.native.stop=""
@@ -13,31 +13,79 @@
         >
         </swiper>
 
+        <marquee class="my-marquee">
+            <marquee-item class="my-marquee-item" v-for="data, i in slideData" :key="i">{{data.title}}</marquee-item>
+        </marquee>
+
         <panel
-            class="panel-list"
-            :list="list"
+            :list="topList"
         ></panel>
 
         <panel
-            v-if="listMore.length"
-            class="panel-list"
-            :list="listMore"
+            v-if="moreList.length"
+            :list="moreList"
             type="1"
-        ></panel> -->
+        ></panel>
     </div>
 </template>
 
 <script>
-import { Swiper, Panel } from 'vux';
+import { Swiper, Panel, Marquee, MarqueeItem } from 'vux';
 
 export default {
     name: 'Main',
     components: {
         Swiper,
-        Panel
+        Panel,
+        Marquee,
+        MarqueeItem
+    },
+    data() {
+        return {
+            slideIndex: 0
+        }
+    },
+    computed: {
+        slideData() {
+            return this.$store.getters.slideData;
+        },
+        topList() {
+            return this.$store.getters.topList;
+        },
+        moreList() {
+            return this.$store.getters.moreList;
+        }
     },
-    created() {
-        console.log('created...');
+    methods: {
     }
 }
 </script>
+
+<style lang="less">
+#app {
+    .my-marquee {
+        margin: 10px;
+    }
+    .my-marquee-item {
+        color: #aaa;
+        text-align: left;
+    }
+
+    .weui-media-box__hd,  .weui-media-box__hd img {
+        width: 102px;
+        height: 78px;
+    }
+
+    .weui-media-box__bd {
+       height: 78px;
+    }
+
+    .weui-media-box__title {
+       white-space: normal;
+    }
+
+    .loading-layer {
+       padding-bottom: 80px;
+    }
+}
+</style>

src/main.js

@@ -4,14 +4,12 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import VueScroller from 'vue-scroller'
-import VueJsonp from 'vue-jsonp'
 import store from './store'
 
 import  { ToastPlugin } from 'vux';
 Vue.use(ToastPlugin);
 
 Vue.use(VueScroller);
-Vue.use(VueJsonp);
 
 Vue.config.productionTip = false
 

src/store/index.js

@@ -1,41 +1,146 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import VueJsonp from 'vue-jsonp'
 
 Vue.use(Vuex);
+Vue.use(VueJsonp);
 
 export default new Vuex.Store({
 
     state: {
-        cateogris: [
+        categoryKey: 'recommend',
+        categories: [
             {
-                name: 'recommend',
-                viewname: '头条'
+                name: '头条',
+                key: 'recommend'
             },
             {
-                name: 'game',
-                viewname: '游戏'
+                name: '游戏',
+                key: 'game'
             },
             {
-                name: 'sports',
-                viewname: '体育'
+                name: '体育',
+                key: 'sports'
             },
             {
-                name: 'shanghai',
-                viewname: '上海'
+                name: '上海',
+                key: 'shanghai'
             },
             {
-                name: 'auto',
-                viewname: '汽车'
-            },
-            {
-                name: 'tech',
-                viewname: '科技'
+                name: '汽车',
+                key: 'auto'
             }
-        ]
+        ],
+        slideData: [],
+        topList: [],
+        moreList: []
     },
     getters: {
-        cateogris(state) {
-            return state.cateogris;
+        categoryKey(state) {
+            return state.categoryKey;
+        },
+        categories(state) {
+            return state.categories;
+        },
+        slideData(state) {
+            return state.slideData;
+        },
+        topList(state) {
+            return state.topList;
+        },
+        moreList(state) {
+            return state.moreList;
+        }
+    },
+    mutations: {
+        updateSlideData(state, data) {
+            state.slideData = data;
+        },
+        updateTopList(state, data) {
+            state.topList = data;
+        },
+        updateMoreList(state, data) {
+            state.moreList = state.moreList.concat(data);
+        }
+    },
+    actions: {
+        getTopList(store) {
+            Vue.jsonp('http://3g.163.com/touch/jsonp/sy/recommend/0-9.html').then( data => {
+                // console.log(data);
+                if (data.code == 200) {
+                    let slideData = data.focus.filter( item => {
+                        return item.addata == null;
+                    } ).map( item => {
+                        return {
+                            title: item.title,
+                            img: item.picInfo[0].url,
+                            url: item.link
+                        }
+                    } );
+
+                    let topList = data.list.filter( item => {
+                        return item.addata == null;
+                    } ).map( item => {
+                        return {
+                            title: item.title,
+                            src: item.picInfo[0].url,
+                            desc: item.category
+                        }
+                    } );
+
+                    store.commit('updateSlideData', slideData);
+                    store.commit('updateTopList', topList);
+                }
+            } );
+        },
+
+        refreshTopList(store, {refreshKey}) {
+            return Vue.jsonp('http://3g.163.com/touch/jsonp/sy/recommend/0-9.html', {
+                miss: '00',
+                refresh: refreshKey
+            })
+            .then( data => {
+                let topList = data.list.filter( item => {
+                    return item.addata == null;
+                } ).map( item => {
+                    return {
+                        title: item.title,
+                        src: item.picInfo[0].url,
+                        desc: item.category
+                    }
+                } );
+
+                store.commit('updateTopList', topList);
+
+                return Promise.resolve(topList.length);
+            } )
+        },
+
+        loadMoreList(store, {refreshKey, page, prepage}) {
+            let start = page*prepage;
+            let end = start + prepage;
+            return Vue.jsonp(`http://3g.163.com/touch/jsonp/sy/recommend/${start}-${end}.html`, {
+                miss: '00',
+                refresh: refreshKey
+            })
+            .then( data => {
+                // console.log(data);
+                let moreList = data.list.filter( item => {
+                    return item.addata == null && item.picInfo.length;
+                } ).map( item => {
+                    return {
+                        title: item.title,
+                        src: item.picInfo[0].url,
+                        desc: item.category
+                    }
+                } );
+
+                console.log(moreList);
+
+                store.commit('updateMoreList', moreList);
+
+                return Promise.resolve();
+            } )
         }
     }