首先简要说明一下本攻略要实现的效果:仿京东移动站导航,即通过手指滑动可以实现左右切换导航,同时在左右切换时有一定的动画效果。
一、需要实现的功能
本攻略需要完成以下功能:
-
实现左右滑动导航栏,并加上相应的动画效果。
-
实现导航栏切换时的视觉效果。
二、实现思路
在实现本攻略时,我们采用的是Vue和vue-touch。
- Vue
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技术站