完成导航栏组件

components/moblie/nav.vue

+<template>
+  <yun-div
+    :height-v="76"
+    bg-color-v="#fff"
+    :border-v="[1,'solid','#EFEFEF','bottom']"
+    :extend-style="{boxShadow: '-18px -2px 20px -23px rgba(0,0,0,.2) inset',overflowX: 'auto'}"
+  >
+    <yun-div
+      :width-v="750"
+      :height-v="96"
+      :flex-v="['row','flex-start','flex-start']"
+      :font-style="[28,36,400,'#999','left']"
+      :extend-style="{overflowX: 'auto'}"
+    >
+      <yun-div
+        :no-flex-shrink="true"
+        :padding-v="[20,0,0,40]"
+        v-for="(item, index) in navList"
+        :class="{active:index === actived}"
+        :flex-v="['column','flex-start','center']"
+      >
+        <span @click="toggle(index, item.id)">{{item.label}}</span>
+        <yun-div :width-v="16" :height-v="4" :border-r="[2,2,0,0]" :margin-v="[16,0,0]" :bg-color-v="index === actived ? '#00AAE6' : '#fff'"></yun-div>
+      </yun-div>
+    </yun-div>
+  </yun-div>
+</template>
+
+<script>
+import commonMixin from "./commonMixin";
+
+export default {
+  mixins: [commonMixin],
+
+  data() {
+    return {
+      actived: 0,
+      navList: [
+        {
+          label: '前端',
+          id: 'all'
+        },
+        {
+          label: 'JavaScript',
+          id: '10'
+        },
+        {
+          label: 'Java',
+          id: '11'
+        },
+        {
+          label: 'JavaWeb',
+          id: '12'
+        },
+        {
+          label: '前端',
+          id: '13'
+        },
+        {
+          label: '前端',
+          id: '14'
+        },
+        {
+          label: '前端',
+          id: '15'
+        },
+        {
+          label: '前端',
+          id: '16'
+        },
+        {
+          label: '前端',
+          id: '17'
+        },
+        {
+          label: '前端',
+          id: '18'
+        },
+        {
+          label: '前端',
+          id: '19'
+        }
+      ]
+    }
+  },
+  methods: {
+    toggle(index, id) {
+      this.actived = index
+      this.$router.push({
+        path: '/test',
+        query: {
+          type: id
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.active {
+  color: #333333 !important;
+  @extend %animate-transition;
+}
+</style>