edit

package.json

@@ -16,6 +16,7 @@
     "vue-jsonp": "^0.1.5",
     "vue-router": "^2.3.1",
     "vue-scroller": "^2.2.1",
+    "vuex": "^2.3.1",
     "vux": "^2.4.1",
     "vux-loader": "^1.1.0"
   },

src/App.vue

@@ -1,17 +1,16 @@
 <template>
     <div id="app">
         <view-box ref="viewBox">
-            <x-header slot="header" style="width:100%;position:absolute;left:0;top:0;z-index:100;">
+            <x-header slot="header">
                 <div slot="overwrite-left">直播</div>
                 <div>网易</div>
                 <div slot="right">搜索</div>
             </x-header>
 
+            <!-- :on-refresh="refresh"
+            :on-infinite="infinite" -->
             <scroller
                 ref="myScroller"
-                :on-refresh="refresh"
-                :on-infinite="infinite"
-                refreshText="松开推荐"
                 style="top: 46px;"
             >
 
@@ -24,48 +23,14 @@
                     @mousemove.native.stop=""
                     @mouseup.native.stop=""
                 >
-                    <div class="box1">
+                    <div class="wy-tab">
                         <tab>
                             <tab-item selected>头条</tab-item>
-                            <tab-item>娱乐</tab-item>
-                            <tab-item>体育</tab-item>
-                            <tab-item>网易号</tab-item>
-                            <tab-item>北京</tab-item>
-                            <tab-item>上海</tab-item>
-                            <tab-item>娱乐</tab-item>
-                            <tab-item>体育</tab-item>
-                            <tab-item>网易号</tab-item>
-                            <tab-item>北京</tab-item>
-                            <tab-item>上海</tab-item>
                         </tab>
                     </div>
                 </sc>
 
-                <swiper
-                    :list="slideData"
-                    v-model="slideIndex"
-                    @on-index-change="slideDataIndexChange"
-                    @touchstart.native.stop=""
-                    @touchmove.native.stop=""
-                    @touchend.native.stop=""
-                    @mousedown.native.stop=""
-                    @mousemove.native.stop=""
-                    @mouseup.native.stop=""
-                >
-                </swiper>
-
-                <panel
-                    class="panel-list"
-                    :list="list"
-                    type="1"
-                ></panel>
-
-                <panel
-                    v-if="listMore.length"
-                    class="panel-list"
-                    :list="listMore"
-                    type="1"
-                ></panel>
+                <router-view></router-view>
 
             </scroller>
 
@@ -88,20 +53,12 @@
                 </tabbar-item>
             </tabbar>
 
-            <router-view></router-view>
-
         </view-box>
     </div>
 </template>
 
 <script>
-import Vue from 'vue';
-import { ViewBox, XHeader, Tab, TabItem, Scroller as Sc, Swiper, Panel, Tabbar, TabbarItem } from 'vux';
-
-import  { ToastPlugin } from 'vux';
-Vue.use(ToastPlugin);
-
-import slideData from './data/slide';
+import { ViewBox, XHeader, Tab, TabItem, Scroller as Sc, Tabbar, TabbarItem } from 'vux';
 
 const refreshKey = ['A', 'B01', 'B02', 'B03', 'B04', 'B05', 'B06', 'B07', 'B08', 'B09', 'B010'];
 let refreshKeyIndex = 0;
@@ -117,53 +74,47 @@ export default {
         Tab,
         TabItem,
         Sc,
-        Swiper,
-        Panel,
         Tabbar,
         TabbarItem
     },
     data() {
         return {
-            // 幻灯片
-            slideData: [],
-            slideIndex: 0,
-
-            list: [],
-            listMore: []
         }
     },
-    mounted() {
-        // console.log('mounted');
+    
+    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'
-        Vue.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);
-        })
+        // 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);
+        // })
     },
     methods: {
         slideDataIndexChange (index) {
@@ -183,26 +134,27 @@ export default {
             if (refreshKeyIndex == refreshKey.length) {
                 refreshKeyIndex = 0;
             }
-            Vue.jsonp('http://3g.163.com/touch/jsonp/sy/recommend/0-9.html', {
+            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');
+                this.list = [];
+                json.list.forEach(item => {
 
-                    });
-                }, 1000);
+                        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);
             } )
 
 
@@ -220,10 +172,7 @@ export default {
             let start = page * prepage;
             let end = start + prepage;
 
-            Vue.jsonp('http://3g.163.com/touch/jsonp/sy/recommend/'+start+'-'+end+'.html', {
-                miss: '00',
-                refresh: refreshKey[refreshKeyIndex]
-            })
+            this.$jsonp('http://3g.163.com/touch/jsonp/sy/recommend/'+start+'-'+end+'.html')
             .then( json => {
                 // return;
                 // this.listMore = [];
@@ -255,16 +204,17 @@ html, body {
    width: 100%;
    overflow-x: hidden;
  }
-
  #app {
      height: 100%;
  }
 
-.box1 {
+.wy-tab {
   height: 44px;
   position: relative;
-  width: 1490px;
+  width: 1110px;
 }
+
+
 .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;

src/components/Main.vue

@@ -1,11 +1,43 @@
 <template>
-    <div class="hello">
+    <div class="main">
+        <!-- <swiper
+            :list="slideData"
+            v-model="slideIndex"
+            @on-index-change="slideDataIndexChange"
+            @touchstart.native.stop=""
+            @touchmove.native.stop=""
+            @touchend.native.stop=""
+            @mousedown.native.stop=""
+            @mousemove.native.stop=""
+            @mouseup.native.stop=""
+        >
+        </swiper>
 
+        <panel
+            class="panel-list"
+            :list="list"
+        ></panel>
+
+        <panel
+            v-if="listMore.length"
+            class="panel-list"
+            :list="listMore"
+            type="1"
+        ></panel> -->
     </div>
 </template>
 
 <script>
+import { Swiper, Panel } from 'vux';
+
 export default {
-    name: 'Main'
+    name: 'Main',
+    components: {
+        Swiper,
+        Panel
+    },
+    created() {
+        console.log('created...');
+    }
 }
 </script>

src/data/news.js

@@ -1,402 +0,0 @@
-export default [
-    {
-        title: '章莹颖案嫌犯录音:曾向他人描述章莹颖反抗情形',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: '官员救灾时抽烟嚼槟榔女子帮撑伞 被纪委严重警告',
-        img: '/static/images/news/2.png',
-        url: ''
-    },
-    {
-        title: '西安一酒店开业遭十几人打砸 持续近半个小时',
-        img: '/static/images/news/3.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    },
-    {
-        title: 'asdasdsad',
-        img: '/static/images/news/1.png',
-        url: ''
-    }
-]

src/data/slide.js

@@ -1,17 +0,0 @@
-export default [{
-  url: 'javascript:',
-  img: '/static/images/slide/1.jpeg',
-  title: '男子在美国建“国中国” 仅有33名公民'
-}, {
-  url: 'javascript:',
-  img: '/static/images/slide/2.jpg',
-  title: '请戴好耳机，确认四下无人再点开'
-}, {
-  url: 'javascript:',
-  img: '/static/images/slide/3.jpeg',
-  title: '拆迁户外出两小时 回来后发现家被搬空'
-}, {
-  url: 'javascript:',
-  img: '/static/images/slide/4.jpeg',
-  title: 'NASA宇航员在国际空间站庆祝独立日'
-}];

src/main.js

@@ -5,6 +5,10 @@ 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);
@@ -15,6 +19,7 @@ Vue.config.productionTip = false
 new Vue({
   el: '#app',
   router,
+  store,
   template: '<App/>',
   components: { App }
 })

src/router/index.js

@@ -5,11 +5,11 @@ import Main from '@/components/Main'
 Vue.use(Router)
 
 export default new Router({
-  routes: [
-    {
-      path: '/',
-      name: 'Main',
-      component: Main
-    }
-  ]
+    routes: [
+        {
+            path: '/',
+            name: 'Main',
+            component: Main
+        }
+    ]
 })

src/store/index.js

@@ -0,0 +1,42 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+
+    state: {
+        cateogris: [
+            {
+                name: 'recommend',
+                viewname: '头条'
+            },
+            {
+                name: 'game',
+                viewname: '游戏'
+            },
+            {
+                name: 'sports',
+                viewname: '体育'
+            },
+            {
+                name: 'shanghai',
+                viewname: '上海'
+            },
+            {
+                name: 'auto',
+                viewname: '汽车'
+            },
+            {
+                name: 'tech',
+                viewname: '科技'
+            }
+        ]
+    },
+    getters: {
+        cateogris(state) {
+            return state.cateogris;
+        }
+    }
+
+});