vue 和vue-touch 实现移动端左右导航效果（仿京东移动站导航）

首先简要说明一下本攻略要实现的效果：仿京东移动站导航，即通过手指滑动可以实现左右切换导航，同时在左右切换时有一定的动画效果。

一、需要实现的功能

本攻略需要完成以下功能：

实现左右滑动导航栏，并加上相应的动画效果。
实现导航栏切换时的视觉效果。

二、实现思路

在实现本攻略时，我们采用的是Vue和vue-touch。

Vue是一个轻量级的JavaScript框架，它专注于MVVM的应用，因此通过Vue实现现代Web应用的数据绑定、模板渲染、组件化开发等功能都非常容易。

vue-touch

vue-touch是一款专门用于Vue的移动端手势插件。它可以非常方便地完成在Vue应用中的手势识别，并且提供了丰富的手势事件、手势方向的选项。

三、操作步骤

安装vue-touch

在终端中使用npm安装vue-touch，命令如下：

$ npm install vue-touch

添加插件

在Vue实例中添加vue-touch插件，并指定触发事件为左右滑动事件。代码如下：

import VueTouch from 'vue-touch';
Vue.use(VueTouch, {name: 'v-touch'});
VueTouch.config.swipe = {
  direction: 'horizontal'
};

实现导航栏

在模板中声明导航栏，并设置宽度、高度等样式属性。代码如下：

<template>
  <div class="nav-wrap">
    <div class="nav-item" v-for="item in navList">{{item}}</div>
  </div>
</template>

<style scoped>
  .nav-wrap {
    width: 100%;
    height: 40px;
    overflow: hidden;
  }

  .nav-item {
    float: left;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }
</style>

实现导航栏滑动

在Vue实例中添加methods方法，定义滑动的逻辑。具体来讲，我们需要定义一个变量navIndex，代表当前显示的导航栏。然后根据手指滑动方向，更新navIndex的值。代码如下：

export default {
  data() {
    return {
      navList: ['首页', '数码', '美妆', '服装', '图书', '工具', '家居'],
      navIndex: 0
    };
  },
  methods: {
    handleSwipe(direction) {
      if (direction === 'left' && this.navIndex < this.navList.length - 1) {
        this.navIndex++;
      } else if (direction === 'right' && this.navIndex > 0) {
        this.navIndex--;
      }
    }
  }
};

添加事件绑定

为导航栏div添加事件绑定，并绑定方法handleSwipe。代码如下：

<template>
  <div class="nav-wrap" v-touch:swipe="handleSwipe">
    <div class="nav-item" v-for="(item,index) in navList" :class="{active:index === navIndex}">{{item}}</div>
  </div>
</template>

添加动画效果

最后，我们可以通过CSS添加动画效果。具体来说，我们可以通过设置translate3d属性来实现左右移动的效果。代码如下：

.nav-wrap { 
  ...
  transition: transform 0.3s ease-out;
}

.nav-item.active {
  color: #fe6a30;
}

.nav-wrap[data-direction="left"] {
  transform: translate3d(-100%, 0px, 0px);
}

.nav-wrap[data-direction="right"] {
  transform: translate3d(100%, 0px, 0px);
}

在handleSwipe方法中，我们根据滑动方向修改nav-wrap元素的data-direction属性，继而触发CSS动画。代码如下：

export default {
  ...
  methods: {
    handleSwipe(direction) {
      ...
      const wrap = document.querySelector('.nav-wrap');
      wrap.setAttribute('data-direction', direction);
      setTimeout(() => {
        wrap.setAttribute('data-direction', '');
      }, 300);
    }
  }
}

四、示例说明

下面给出两个示例说明，说明如何通过Vue和vue-touch实现导航栏左右移动的效果。

示例一

我们可以通过下面的代码，实现一个简单的导航栏。

<template>
  <div class="nav-wrap" v-touch:swipe="handleSwipe">
    <div class="nav-item" v-for="(item,index) in navList" :class="{active:index === navIndex}">{{item}}</div>
  </div>
</template>

<style scoped>
  .nav-wrap {
    width: 100%;
    height: 40px;
    overflow: hidden;
    transition: transform 0.3s ease-out;
  }

  .nav-item {
    float: left;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }

  .nav-item.active {
    color: #fe6a30;
  }

  .nav-wrap[data-direction="left"] {
    transform: translate3d(-100%, 0px, 0px);
  }

  .nav-wrap[data-direction="right"] {
    transform: translate3d(100%, 0px, 0px);
  }
</style>

<script>
import VueTouch from 'vue-touch';

export default {
  data() {
    return {
      navList: ['首页', '数码', '美妆', '服装', '图书', '工具', '家居'],
      navIndex: 0
    };
  },
  methods: {
    handleSwipe(direction) {
      if (direction === 'left' && this.navIndex < this.navList.length - 1) {
        this.navIndex++;
      } else if (direction === 'right' && this.navIndex > 0) {
        this.navIndex--;
      }
      const wrap = document.querySelector('.nav-wrap');
      wrap.setAttribute('data-direction', direction);
      setTimeout(() => {
        wrap.setAttribute('data-direction', '');
      }, 300);
    }
  },
  mounted() {
    Vue.use(VueTouch, {name: 'v-touch'});
    VueTouch.config.swipe = {
      direction: 'horizontal'
    };
  }
};
</script>

在上面的代码中，我们定义了一个navList数组，为导航栏提供了数据源。同时，我们在导航栏div元素上绑定了v-touch:swipe事件，用来触发handleSwipe方法。

示例二

我们可以通过下面的代码，实现一个稍微复杂一点的导航栏。

<template>
  <div class="nav-wrap" v-touch:swipe="handleSwipe">
    <div class="nav-item" v-for="(item,index) in navList" :class="{active:index === navIndex}">
      <i :class="item.icon"></i>
      <span>{{item.title}}</span>
    </div>
  </div>
</template>

<style scoped>
  .nav-wrap {
    width: 100%;
    height: 50px;
    overflow: hidden;
    transition: transform 0.3s ease-out;
  }

  .nav-item {
    float: left;
    width: 33.33%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 14px;
    color: #333;
    position: relative;
  }

  .nav-item.active {
    color: #fe6a30;
  }

  .nav-item span {
    display: block;
  }

  .nav-item i {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 20px;
  }

  .nav-wrap[data-direction="left"] {
    transform: translate3d(-100%, 0px, 0px);
  }

  .nav-wrap[data-direction="right"] {
    transform: translate3d(100%, 0px, 0px);
  }

  .slider-item {
    position: absolute;
    width: 33.33%;
    height: 3px;
    background-color: #fe6a30;
    left: 33.33%;
    bottom: 0;
    transform: translateX(-50%);
    transition: all 0.3s ease-out;
  }

  .nav-item.active .slider-item {
    left: 0;
  }
</style>

<script>
import VueTouch from 'vue-touch';

export default {
  data() {
    return {
      navList: [
        {icon: 'fa fa-globe', title: '首页'},
        {icon: 'fa fa-mobile', title: '数码'},
        {icon: 'fa fa-paw', title: '美妆'},
        {icon: 'fa fa-shopping-bag', title: '服装'},
        {icon: 'fa fa-book', title: '图书'},
        {icon: 'fa fa-wrench', title: '工具'},
        {icon: 'fa fa-home', title: '家居'}
      ],
      navIndex: 0
    };
  },
  methods: {
    handleSwipe(direction) {
      if (direction === 'left' && this.navIndex < this.navList.length - 1) {
        this.navIndex++;
      } else if (direction === 'right' && this.navIndex > 0) {
        this.navIndex--;
      }
      const wrap = document.querySelector('.nav-wrap');
      wrap.setAttribute('data-direction', direction);
      setTimeout(() => {
        wrap.setAttribute('data-direction', '');
      }, 300);
    }
  },
  mounted() {
    Vue.use(VueTouch, {name: 'v-touch'});
    VueTouch.config.swipe = {
      direction: 'horizontal'
    };
  }
};
</script>

在上面的代码中，我们定义了两个属性：icon和title，分别用于展示导航栏中的图标和文字。

同时，我们还在导航栏元素上添加了一个.slider-item元素，用于在导航栏切换时显示动画效果。

在样式部分，我们对slider-item元素进行了CSS样式设置，并在active状态下对其进行了特殊的动画效果。

值得注意的是，为了使导航栏的图标展示更加美观，我们在应用中添加了FontAwesome的图标库。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-TD2rKlD4RLoZh/f6eXTvXRuuSTtnJO1BzsksZvW6Wi8tI2jZoiCn+6sDe5hYE6TFF/DSw8CSQdUCxS5actj8bw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

至此，我们已经完成了一个较为复杂的导航栏，可以非常方便地在移动端应用中应用此特效。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue 和vue-touch 实现移动端左右导航效果（仿京东移动站导航） - Python技术站