引入mint-ui vue-light-swiper vue-awesome-swiper 写一个test页

Author: alistar

README.md

@@ -1,5 +1,5 @@
 # 94club.github.io
-#### 移动端demo, 完全学习https://github.com/zaofeng/vue2-elm
+#### 移动端demo, 完全学习https://github.com/bailicangdu/vue2-elm
 
 # 项目布局
 

package-lock.json

@@ -15,8 +15,11 @@
     "better-scroll": "^1.12.1",
     "fastclick": "^1.0.6",
     "iscroll": "^5.2.0",
+    "mint-ui": "^2.2.13",
     "showdown": "^1.8.6",
     "vue": "^2.5.2",
+    "vue-awesome-swiper": "^2.6.7",
+    "vue-light-swiper": "^1.0.9",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
   },

package.json

@@ -0,0 +1,4 @@
+#### navbar 注意事项
+1 安装swiper3 npm i vue-awesome-swiper@2.6.7 -S 
+2 每一个slide的width，强制auto
+TODO 数据异步获取 切换动画效果  上拉加载  

src/DemoDescription.txt

@@ -4,4 +4,6 @@ css初始化 结构目录创建   03d02d43f7825424569c1b1b638255565026ca4e
 移动端适配 路由懒加载 css书写方案  2498ba9725608131d7cc2eadea09daba108ce104
 安装依赖 完成首页 
 npm i vuex showdown iscroll fastclick better-scroll axios -S
-npm i node-sass sass-loader http-proxy-middleware -D
+npm i node-sass sass-loader http-proxy-middleware -D
+5f18534dcb413eb2714da0f95e8ea4869ef489c4
+引入mint-ui vue-light-swiper vue-awesome-swiper 写一个test页（mint-ui暂时放在生产依赖）

src/commitDetail.txt

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <swiper :options="swiperOption" :not-next-tick="swiperOption.notNextTick" ref="swiper1">
+    <!-- slides -->
+    <swiper-slide
+        v-for="(item, index) in floorNavData.list"
+        :key="index"
+        :class="{'is-active': floorNavData.activeIndex === index}"
+        @click.native="onFloorNav(index)" class="auto-width">
+       {{item}}
+    </swiper-slide>
+  </swiper>
+  <swiper :options="swiperOption2" :not-next-tick="swiperOption2.notNextTick" ref="swiper2">
+    <!-- slides -->
+    <swiper-slide>I'm Slide {{floorNavData.activeIndex}}</swiper-slide>
+  </swiper>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      floorNavData: {
+        list: ['PHONE', 'IP', 'MIFI', 'Air container', 'TF-card', 'earphone', 'xbox', 'wifi'],
+        activeIndex: 0
+      },
+      index: 0,
+      swiperOption: {
+        slidesPerView: 'auto',
+        spaceBetween: 10, // slide之间的距离（单位px）。
+        freeMode: true, // 默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
+        loop: false // 是否可循环
+      },
+      swiperOption2: {
+        direction: 'horizontal', // Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
+        loop: false,
+        effect: 'fade', // 淡入
+        // effect : 'cube', // 方块
+        // effect : 'coverflow', // 3D流
+        // effect : 'flip', // 3D翻转
+        autoHeight: true, // 自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
+        onSlideChangeEnd: function () { // 回调函数，swiper从一个slide过渡到另一个slide结束时执行。
+          this.floorNavData.activeIndex = this.swiper2.activeIndex
+          // setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
+          // swiper1.slideTo(n, 500, false);
+        }
+      }
+    }
+  },
+  computed: {
+    swiper1 () {
+      return this.$refs.swiper1.swiper
+    },
+    swiper2 () {
+      return this.$refs.swiper2.swiper
+    }
+  },
+  mounted () {
+    // current swiper instance
+    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
+    console.log('this is current swiper instance object', this.swiper1)
+    console.log('this is current swiper instance object', this.swiper2)
+    this.swiper2.slideTo(3, 1000, false)
+  },
+  methods: {
+    onFloorNav (index) {
+      this.floorNavData.activeIndex = index
+    }
+  }
+}
+</script>
+<style>
+.auto-width {
+  width: auto!important;
+}
+.is-active {
+  border-bottom: 1px solid red;
+}
+</style>

src/components/common/test.vue

@@ -3,15 +3,19 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
-
+import MintUI from 'mint-ui'
+import 'mint-ui/lib/style.css'
+import VueAwesomeSwiper from 'vue-awesome-swiper'
+import 'swiper/dist/css/swiper.css'
 import './config/rem'
 import FastClick from 'fastclick'
 if ('addEventListener' in document) {
   document.addEventListener('DOMContentLoaded', function () {
     FastClick.attach(document.body)
   }, false)
 }
-
+Vue.use(MintUI)
+Vue.use(VueAwesomeSwiper)
 Vue.config.productionTip = false // 生产环境去掉vue的警告信息
 /* eslint-disable no-new */
 new Vue({

src/main.js

@@ -1,3 +1,19 @@
 <template>
-  <div>home</div>
+  <div>home
+    <div>
+      <button @click="goTest">效果测试页</button>
+    </div>
+  </div>
 </template>
+<script>
+export default {
+  data () {
+    return {}
+  },
+  methods: {
+    goTest () {
+      this.$router.push('./test')
+    }
+  }
+}
+</script>

src/page/home/home.vue

@@ -49,6 +49,7 @@ const questionDetail = () => import('../page/service/children/questionDetail')
 const find = () => import('../page/find/find')
 const download = () => import('../page/download/download')
 const notFound = () => import('../components/common/404.vue')
+const test = () => import('../components/common/test.vue')
 const notAllow = () => import('../components/common/401.vue')
 
 Vue.use(Router)
@@ -268,6 +269,10 @@ const router = new Router({
           component: pointsDetail
         }]
       },
+      {
+        path: 'test',
+        component: test
+      },
       {
         path: '401',
         component: notAllow

src/plugins/swiper.min.js

@@ -1,3 +1,4 @@
 @import './common.scss'; // reset 和 公共的css
 @import './mixin.scss'; // 混合宏
-@import './home.scss'; // 首页
+@import './home.scss'; // 首页
+@import './test.scss'; // 测试页