cps：首页导航

htmldev/cps/src/App.vue

@@ -35,6 +35,10 @@ export default {
 <style lang="scss">
 @import "./assets/styles/reset";
 
+body {
+  background: #F7F6F9;
+}
+
 .clearfix {
   display: inline-block;
 

htmldev/cps/src/router/index.js

@@ -22,6 +22,39 @@ const routes = [
     meta: {
       title: '登录'
     }
+  },
+  {
+    path: '/',
+    component: _import('views/marketing/index'),
+    children: [
+      {
+        path: '', // 省钱
+        name: 'MarketingSave',
+        component: _import('views/marketing/save/index'),
+        meta: {
+          isUseCache: false,
+          keepAlive: true
+        }
+      },
+      {
+        path: '/return', // 返钱
+        name: 'MarketingReturn',
+        component: _import('views/marketing/return/index'),
+        meta: {
+          isUseCache: false,
+          keepAlive: true
+        }
+      },
+      {
+        path: '/make', // 赚钱
+        name: 'MarketingMake',
+        component: _import('views/marketing/make/index'),
+        meta: {
+          isUseCache: false,
+          keepAlive: true
+        }
+      }
+    ]
   }
 ]
 

htmldev/cps/src/views/marketing/index.vue

@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <div
+      class="navigator-container"
+      ref="navigato">
+      <ul
+        class="tab-list"
+        ref="tabList">
+        <li class="tab-item"
+            :class="{'link-avtive': $route.name === item.routeName}"
+            v-for="(item, index) in navList"
+            :key="index"
+            @click="_selectNav(item)">
+          <img
+            :src="$route.name === item.routeName ? item.active : item.default"
+            alt="">
+          <p class="tab-name">{{ item.title }}</p>
+        </li>
+      </ul>
+    </div>
+    <router-view/>
+  </div>
+</template>
+
+<script>
+import BScroll from 'better-scroll'
+
+export default {
+  data () {
+    return {
+      currentTabIndex: 0, // 当前默认tab
+      scroll: null,
+      navList: [
+        {
+          id: 0,
+          title: '省钱',
+          default: require('./image/ic_save_0@2x.png'),
+          active: require('./image/ic_save_1@2x.png'),
+          routeName: 'MarketingSave'
+        },
+        {
+          id: 1,
+          title: '返钱',
+          default: require('./image/ic_return_0@2x.png'),
+          active: require('./image/ic_return_1@2x.png'),
+          routeName: 'MarketingReturn'
+        },
+        {
+          id: 2,
+          title: '赚钱',
+          default: require('./image/ic_make_0@2x.png'),
+          active: require('./image/ic_make_1@2x.png'),
+          routeName: 'MarketingMake'
+        }
+      ]
+    }
+  },
+  mounted () {
+    this.funInitBScroll(0)
+    this._initTabListWidth()
+    const timer = setTimeout(() => {
+      clearTimeout(timer)
+      this._adjust(this.currentTabIndex)
+    }, 500)
+  },
+  methods: {
+    funInitBScroll (index) {
+      const options = {
+        probeType: 1,
+        click: true,
+        startX: this.initTranslate(index),
+        scrollY: false,
+        scrollX: true,
+        scrollbar: false,
+        startY: 0,
+        freeScroll: false,
+        mouseWheel: true,
+        bounce: true,
+        zoom: false
+      }
+      this.scroll = new BScroll(this.$refs.navigato, options)
+    },
+    _selectNav (item) {
+      if (item === undefined) {
+        return
+      }
+      // this.$emit('funChange', item.id)
+      this.$router.replace({ name: item.routeName })
+    },
+    selectNav (item) {
+      if (item === undefined) {
+        return
+      }
+      this.currentTabIndex = item.id
+      this._adjust(item.id)
+    },
+    _initTabListWidth () {
+      const tabList = this.$refs.tabList
+      const items = tabList.children
+      let width = 0
+      for (let i = 0; i < items.length; i++) {
+        width += items[i].clientWidth
+      }
+      tabList.style.width = (width + 1) + 'px'
+    },
+    initTranslate (tabId) {
+      const viewportWidth = this.$refs.navigato.clientWidth
+      const tabListWidth = this.$refs.tabList.clientWidth
+      const minTranslate = Math.min(0, viewportWidth - tabListWidth)
+      const middleTranslate = viewportWidth / 2
+      const items = this.$refs.tabList.children
+      let width = 0
+      this.navList.every((item, index) => {
+        if (item.id === tabId) {
+          return false
+        }
+        width += items[index].clientWidth
+        return true
+      })
+      let translate = middleTranslate - width
+      translate = Math.max(minTranslate, Math.min(0, translate))
+      return translate
+    },
+    // 导航类目超过一屏在使用
+    _adjust (tabId) {
+      this.scroll.scrollTo(this.initTranslate(tabId), 0, 300)
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+.navigator-container {
+  width: 100%;
+  padding: 10px 0;
+  white-space: nowrap;
+  overflow: hidden;
+
+  .tab-list {
+    font-size: 0;
+  }
+
+  .tab-item {
+    display: inline-block;
+    width: 125px;
+    height: 36px;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 0;
+
+    &.link-avtive {
+      img {
+        width: 36px;
+        height: 36px;
+      }
+
+      p {
+        font-size: 26px;
+        color: #1F314A;
+      }
+    }
+
+    img {
+      display: inline-block;
+      vertical-align: middle;
+      width: 24px;
+      height: 24px;
+    }
+
+    p {
+      display: inline-block;
+      vertical-align: middle;
+      font-size: 14px;
+      color: #8B8B8B;
+      line-height: 36px;
+    }
+  }
+}
+</style>

htmldev/cps/src/views/marketing/make/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>赚钱</div>
+</template>
+
+<script>
+export default {
+  name: 'index'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

htmldev/cps/src/views/marketing/return/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>返钱</div>
+</template>
+
+<script>
+export default {
+  name: 'index'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

htmldev/cps/src/views/marketing/save/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>省钱</div>
+</template>
+
+<script>
+export default {
+  name: 'index'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>