edit

src/App.vue

@@ -1,62 +1,108 @@
 <template>
     <div id="app">
-        <x-header style="width: 100%; position: absolute; left: 0px; top: 0px; z-index: 100;">
-            <div slot="overwrite-left">直播</div>
-            <div>网易</div>
-            <div slot="right">搜索</div>
-        </x-header>
-
-        <scroller :lock-y="true">
-            <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>
-        </scroller>
-
-        <swiper :list="demo01_list" v-model="demo01_index" @on-index-change="demo01_onIndexChange"></swiper>
-
-        <panel
-            :list="list"
-            type="1"
-        ></panel>
-
-        <router-view></router-view>
+        <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"
+                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"
+                >
+                    <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="demo01_list" v-model="demo01_index" @on-index-change="demo01_onIndexChange"></swiper>
+
+                <panel
+                    :list="list"
+                    type="1"
+                ></panel>
+
+                <div style="height: 50px;">
+
+                </div>
+
+            </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 { XHeader, Tab, TabItem, Scroller, Swiper, Panel } from 'vux';
+import { ViewBox, XHeader, Tab, TabItem, Scroller as Sc, Swiper, Panel, Tabbar, TabbarItem } from 'vux';
 
 const baseList = [{
   url: 'javascript:',
-  img: 'https://static.vux.li/demo/1.jpg',
-  title: '送你一朵fua'
+  img: '/static/images/slide/1.jpeg',
+  title: '男子在美国建“国中国” 仅有33名公民'
+}, {
+  url: 'javascript:',
+  img: '/static/images/slide/2.jpg',
+  title: '请戴好耳机，确认四下无人再点开'
 }, {
   url: 'javascript:',
-  img: 'https://static.vux.li/demo/2.jpg',
-  title: '送你一辆车'
+  img: '/static/images/slide/3.jpeg',
+  title: '拆迁户外出两小时 回来后发现家被搬空'
 }, {
   url: 'javascript:',
-  img: 'https://static.vux.li/demo/3.jpg',
-  title: '送你一次旅行'
+  img: '/static/images/slide/4.jpeg',
+  title: 'NASA宇航员在国际空间站庆祝独立日'
 }];
 
 let list = [];
 for (let i=0; i<20; i++) {
     list.push({
         title:'这是标题'+i,
-        desc:'由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
+        desc:'由各种道。',
         src:'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff'
     });
 }
@@ -64,12 +110,15 @@ for (let i=0; i<20; i++) {
 export default {
     name: 'app',
     components: {
+        ViewBox,
         XHeader,
         Tab,
         TabItem,
-        Scroller,
+        Sc,
         Swiper,
-        Panel
+        Panel,
+        Tabbar,
+        TabbarItem
     },
     data() {
         return {
@@ -80,18 +129,56 @@ export default {
     },
     methods: {
         onSwiperItemIndexChange (index) {
-          console.log('demo item change', index)
+            console.log('demo item change', index)
         },
         demo01_onIndexChange (index) {
-          this.demo01_index = index
+            this.demo01_index = 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');
+        },
+        mouseup() {
+            console.log('up');
         }
-      }
+
+    }
 }
 </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;

src/main.js

@@ -5,7 +5,6 @@ import App from './App'
 import router from './router'
 import VueScroller from 'vue-scroller'
 
-
 Vue.use(VueScroller);
 
 Vue.config.productionTip = false