yb/src/App.vue

<template>
    <div id="app">
        <view-box ref="viewBox">
            <x-header slot="header" style="width:100%;position:absolute;left:0;top:0;z-index:100;">
                <div slot="overwrite-left">直播</div>
                <div>网易</div>
                <div slot="right">搜索</div>
            </x-header>

            <scroller
                ref="myScroller"
                :on-refresh="refresh"
                :on-infinite="infinite"
                refreshText="松开推荐"
                style="top: 46px;"
            >

                <sc
                    :lock-y="true"
                    @touchstart.native.stop=""
                    @touchmove.native.stop=""
                    @touchend.native.stop=""
                    @mousedown.native.stop=""
                    @mousemove.native.stop=""
                    @mouseup.native.stop=""
                >
                    <div class="box1">
                        <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>

            </scroller>

            <tabbar slot="bottom">
                <tabbar-item>
                    <img slot="icon" src="./assets/icon_nav_button.png">
                    <span slot="label">Wechat</span>
                </tabbar-item>
                <tabbar-item show-dot>
                    <img slot="icon" src="./assets/icon_nav_msg.png">
                    <span slot="label">Message</span>
                </tabbar-item>
                <tabbar-item selected link="/component/demo">
                    <img slot="icon" src="./assets/icon_nav_article.png">
                    <span slot="label">Explore</span>
                </tabbar-item>
                <tabbar-item badge="2">
                    <img slot="icon" src="./assets/icon_nav_cell.png">
                    <span slot="label">News</span>
                </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';

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',
    components: {
        ViewBox,
        XHeader,
        Tab,
        TabItem,
        Sc,
        Swiper,
        Panel,
        Tabbar,
        TabbarItem
    },
    data() {
        return {
            // 幻灯片
            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: {
        slideDataIndexChange (index) {
            this.slideIndex = index
        },

        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;
            }
            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);
            } )


        },

        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)
            } )
        }

    }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';

html, body {
   height: 100%;
   width: 100%;
   overflow-x: hidden;
 }

 #app {
     height: 100%;
 }

.box1 {
  height: 44px;
  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>