add

package.json

@@ -14,6 +14,7 @@
     "less-loader": "^4.0.4",
     "vue": "^2.3.3",
     "vue-router": "^2.3.1",
+    "vue-scroller": "^2.2.1",
     "vux": "^2.4.1",
     "vux-loader": "^1.1.0"
   },

src/App.vue

@@ -1,37 +1,100 @@
 <template>
     <div id="app">
-        <x-header>
+        <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>
 
-        <tab active-color="red">
-            <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>
+        <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>
     </div>
 </template>
 
 <script>
-import { XHeader, Tab, TabItem } from 'vux';
+import { XHeader, Tab, TabItem, Scroller, Swiper, Panel } from 'vux';
+
+const baseList = [{
+  url: 'javascript:',
+  img: 'https://static.vux.li/demo/1.jpg',
+  title: '送你一朵fua'
+}, {
+  url: 'javascript:',
+  img: 'https://static.vux.li/demo/2.jpg',
+  title: '送你一辆车'
+}, {
+  url: 'javascript:',
+  img: 'https://static.vux.li/demo/3.jpg',
+  title: '送你一次旅行'
+}];
+
+let list = [];
+for (let i=0; i<20; i++) {
+    list.push({
+        title:'这是标题'+i,
+        desc:'由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
+        src:'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff'
+    });
+}
 
 export default {
     name: 'app',
     components: {
         XHeader,
         Tab,
-        TabItem
-    }
+        TabItem,
+        Scroller,
+        Swiper,
+        Panel
+    },
+    data() {
+        return {
+            demo01_list: baseList,
+            demo01_index: 0,
+            list
+        }
+    },
+    methods: {
+        onSwiperItemIndexChange (index) {
+          console.log('demo item change', index)
+        },
+        demo01_onIndexChange (index) {
+          this.demo01_index = index
+        }
+      }
 }
 </script>
 
 <style lang="less">
 @import '~vux/src/styles/reset.less';
+
+.box1 {
+  height: 44px;
+  position: relative;
+  width: 1490px;
+}
 </style>

src/main.js

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