edit

build/webpack.prod.conf.js

@@ -11,6 +11,12 @@ var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 
 var env = config.build.env
 
+const vuxLoader = require('vux-loader')
+
+baseWebpackConfig = vuxLoader.merge(baseWebpackConfig, {
+  plugins: ['vux-ui']
+})
+
 var webpackConfig = merge(baseWebpackConfig, {
   module: {
     rules: utils.styleLoaders({

config/index.js

@@ -27,7 +27,11 @@ module.exports = {
     autoOpenBrowser: true,
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    proxyTable: {},
+    proxyTable: {
+        '/api': {
+            target: 'http://localhost:9999'
+        }
+    },
     // CSS Sourcemaps off by default because relative paths are "buggy"
     // with this option, according to the CSS-Loader README
     // (https://github.com/webpack/css-loader#sourcemaps)

package.json

@@ -13,6 +13,7 @@
     "less": "^2.7.2",
     "less-loader": "^4.0.4",
     "vue": "^2.3.3",
+    "vue-jsonp": "^0.1.5",
     "vue-router": "^2.3.1",
     "vue-scroller": "^2.2.1",
     "vux": "^2.4.1",

src/App.vue

@@ -10,17 +10,19 @@
             <scroller
                 ref="myScroller"
                 :on-refresh="refresh"
-                style="top: 46px"
+                :on-infinite="infinite"
+                refreshText="松开推荐"
+                style="top: 46px;"
             >
 
                 <sc
                     :lock-y="true"
-                    @touchstart.native.stop="touchstart"
-                    @touchmove.native.stop="touchmove"
-                    @touchend.native.stop="touchend"
-                    @mousedown.native.stop="mousedown"
-                    @mousemove.native.stop="mousemove"
-                    @mouseup.native.stop="mouseup"
+                    @touchstart.native.stop=""
+                    @touchmove.native.stop=""
+                    @touchend.native.stop=""
+                    @mousedown.native.stop=""
+                    @mousemove.native.stop=""
+                    @mouseup.native.stop=""
                 >
                     <div class="box1">
                         <tab>
@@ -39,16 +41,31 @@
                     </div>
                 </sc>
 
-                <swiper :list="demo01_list" v-model="demo01_index" @on-index-change="demo01_onIndexChange"></swiper>
+                <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>
 
-                <div style="height: 50px;">
-
-                </div>
+                <panel
+                    v-if="listMore.length"
+                    class="panel-list"
+                    :list="listMore"
+                    type="1"
+                ></panel>
 
             </scroller>
 
@@ -78,34 +95,19 @@
 </template>
 
 <script>
+import Vue from 'vue';
 import { ViewBox, XHeader, Tab, TabItem, Scroller as Sc, Swiper, Panel, Tabbar, TabbarItem } from 'vux';
 
-const baseList = [{
-  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宇航员在国际空间站庆祝独立日'
-}];
-
-let list = [];
-for (let i=0; i<20; i++) {
-    list.push({
-        title:'这是标题'+i,
-        desc:'由各种道。',
-        src:'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff'
-    });
-}
+import  { ToastPlugin } from 'vux';
+Vue.use(ToastPlugin);
+
+import slideData from './data/slide';
+
+const refreshKey = ['A', 'B01', 'B02', 'B03', 'B04', 'B05', 'B06', 'B07', 'B08', 'B09', 'B010'];
+let refreshKeyIndex = 0;
+let page =0;
+let prepage = 10;
+let initLoaded = false;
 
 export default {
     name: 'app',
@@ -122,44 +124,123 @@ export default {
     },
     data() {
         return {
-            demo01_list: baseList,
-            demo01_index: 0,
-            list
+            // 幻灯片
+            slideData: [],
+            slideIndex: 0,
+
+            list: [],
+            listMore: []
         }
     },
+    mounted() {
+        // console.log('mounted');
+        // 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);
+        })
+    },
     methods: {
-        onSwiperItemIndexChange (index) {
-            console.log('demo item change', index)
-        },
-        demo01_onIndexChange (index) {
-            this.demo01_index = index
+        slideDataIndexChange (index) {
+            this.slideIndex = index
         },
 
         refresh(done) {
             // console.log('refresh');
             // console.log(this.$refs.myScroller.finishPullToRefresh);
-            setTimeout(() => {
-                console.log('时间到');
-                this.$refs.myScroller.finishPullToRefresh();
-            }, 2000)
-        },
-        touchstart() {
-            console.log('start');
-        },
-        touchmove() {
-            console.log('move');
-        },
-        touchend() {
-            console.log('end');
-        },
-        mousedown() {
-            console.log('down');
-        },
-        mousemove() {
-            console.log('move');
+
+            // setTimeout(() => {
+            //     console.log('时间到');
+            //     this.$refs.myScroller.finishPullToRefresh();
+            // }, 2000)
+
+            refreshKeyIndex++;
+            if (refreshKeyIndex == refreshKey.length) {
+                refreshKeyIndex = 0;
+            }
+            Vue.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');
+
+                    });
+                }, 1000);
+            } )
+
+
         },
-        mouseup() {
-            console.log('up');
+
+        infinite() {
+            console.log(initLoaded);
+            if (!initLoaded) {
+                console.log('infinite one');
+                this.$refs.myScroller.finishInfinite();
+                return;
+            }
+            console.log('infinite');
+
+            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]
+            })
+            .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)
+            } )
         }
 
     }
@@ -184,4 +265,17 @@ html, body {
   position: relative;
   width: 1490px;
 }
+.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/data/news.js

@@ -0,0 +1,402 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -4,8 +4,10 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import VueScroller from 'vue-scroller'
+import VueJsonp from 'vue-jsonp'
 
 Vue.use(VueScroller);
+Vue.use(VueJsonp);
 
 Vue.config.productionTip = false