前端下拉菜单vue（手势滑动导航栏实战）

前端下拉菜单vue（手势滑动导航栏实战）<script> export default { data() { return { tabs: [ { name: "选项卡1" type: "1" checked: true } { name: "选项卡2" type: "2" checked: true } { name: "选项卡3" type: "3" checked: true } ] activeIndex: 0 }; } computed: { navbarSliderClass() { if (this.activeIndex == 0) { return "navbar_slider_0"; } if (this.activeIndex == 1) { return "navbar_slider_1"; } if (thi

1.前言

最近在学习了一下微信小程序的开发，发现现在开发小程序的框架有很多，希望大家根据自己的实际需求去选择适合自己的开发框架。下面我列举一些常见的框架：

• 微信小程序原生开发框架 MINA
• 美团小程序框架 mpvue
• 组件化开发框架 wepy
• 京东小程序框架 Taro

这里我选择使用 mpvue 来作为自己的开发选择，因为之前使用过 vue 开发过后台管理产品，上手比较简单。

2.mpvue是什么？

额，这个还是自己百度谷歌 mpvue的官方文档吧！这里就不唠叨了，下面进入正题。

3.效果一览

这就是我们这个 Demo 最终实现的效果图，有兴趣动手一下吗？没兴趣也没有关系，完整的代码都已经贴上来，自己拷贝吧！

4.动手

创建示例项目

vue init mpvue/mpvue-quickstart slidebar

先来实现一个TabBar吧 思路和我们平时web写Tab页是一样，监听点击事件，来回切换。css3动画效果来实现底部滚动条的来回切换。

修改pages/index/index.vue中template：

<template> <div> <div class="navbar"> <block v-for="(item index) in tabs" :key="index"> <div :id="index" :class="{'navbar_item_on':activeIndex == index}" class="navbar_item" @click="tabClick"> <div class="navbar_title">{{item.name}}</div> </div> </block> <div class="navbar_slider" :class="navbarSliderClass"></div> </div> <div> <div :hidden="activeIndex != 0">选项一的内容</div> <div :hidden="activeIndex != 1">选项二的内容</div> <div :hidden="activeIndex != 2">选项三的内容</div> </div> </div> </template>

修改pages/index/index.vue中script：

<script> export default { data() { return { tabs: [ { name: "选项卡1" type: "1" checked: true } { name: "选项卡2" type: "2" checked: true } { name: "选项卡3" type: "3" checked: true } ] activeIndex: 0 }; } computed: { navbarSliderClass() { if (this.activeIndex == 0) { return "navbar_slider_0"; } if (this.activeIndex == 1) { return "navbar_slider_1"; } if (this.activeIndex == 2) { return "navbar_slider_2"; } } } methods: { tabClick(e) { this.activeIndex = e.currentTarget.id; } } }; </script>

添加样式：

<style scoped> .content { box-sizing: border-box; height: 100%; padding-top: 50px; /* overflow: auto; */ -webkit-overflow-scrolling: touch; } .swiper-item { height: 100%; text-align: center; } .navbar { display: -webkit-box; display: -webkit-flex; display: flex; position: fixed; z-index: 500; top: 0; height: 50px; width: 100%; background-color: #298de5; border-bottom: 1rpx solid #ccc; } .navbar_item { position: relative; display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; padding: 13px 0; text-align: center; font-size: 0; } .navbar_item .navbar_item_on { color: white; } .navbar_title { color: white; font-weight: 500; display: inline-block; font-size: 15px; max-width: 8em; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; } .navbar_slider { position: absolute; content: " "; left: 0; bottom: 0; width: 6em; height: 3px; background-color: white; -webkit-transition: -webkit-transform 0.1s; transition: -webkit-transform 0.1s; transition: transform 0.1s; transition: transform 0.1s -webkit-transform 0.1s; } .navbar_slider_0 { left: 29rpx; transform: translateX(0); } .navbar_slider_1 { left: 29rpx; transform: translateX(250rpx); } .navbar_slider_2 { left: 29rpx; transform: translateX(500rpx); } .controls { display: -webkit-box; display: -webkit-flex; display: flex; position: fixed; z-index: 8888; top: 80; height: 50px; width: 100%; background-color: #298de5; } </style>

样式是从mp-vue提取出来的，通过tabClick()方法动态更改当前tabbar选中值，然后通过navbarSliderClass()的滑动底部的滚动条。来看下效果吧！

给Tabbar添加手势滑动，接下来改造一下吧，添加手势滑动效果，需要借助小程序的swiper组件来实现。

修改pages/index/index.Vue下的template:

<template> <div> <div class="navbar"> <block v-for="(item index) in tabs" :key="index"> <div :id="index" :class="{'navbar_item_on':activeIndex == index}" class="navbar_item" @click="tabClick"> <div class="navbar_title">{{item.name}}</div> </div> </block> <div class="navbar_slider" :class="navbarSliderClass"></div> </div> <swiper class="content" :duration="50" :style="'height:' contentHeight" @change="swiperChange" :current="currentTab" @animationfinish="onAnimationfinish"> <swiper-item v-for="(item index) in tabs" :key="index"> <div>{{item.name}}</div> </swiper-item> </swiper> </div> </template>

修改Script:

<script> export default { data() { return { tabs: [ { name: "选项卡1" type: "1" checked: true } { name: "选项卡2" type: "2" checked: true } { name: "选项卡3" type: "3" checked: true } ] activeIndex: 0 currentTab: 0 winWidth: 0 winHeight: 0 }; } computed: { navbarSliderClass() { if (this.activeIndex == 0) { return "navbar_slider_0"; } if (this.activeIndex == 1) { return "navbar_slider_1"; } if (this.activeIndex == 2) { return "navbar_slider_2"; } } contentHeight() { return this.winHeight "px"; } } methods: { tabClick(e) { this.activeIndex = e.currentTarget.id; this.currentTab =this.activeIndex; } swiperChange(e) { this.currentTab = e.mp.detail.current; this.activeIndex = this.currentTab; } onAnimationfinish() { console.log("滑动完成.....") } } onLoad() { var res = wx.getSystemInfoSync(); this.winWidth = res.windowWidth; this.winHeight = res.windowHeight; } }; </script>

好了，到这里就全部完成了。注意swiper组件必须给他设置一个固定高度，不可以使用height:100%之类的。可以在swiper里嵌套scroll-view实现列表.不过长列表左右滑动有卡顿，暂未知道该如何优化。

如果你们喜欢这类实战类的技术文章，请关注我哦！我会不定期更新自己开发过程中的遇到的问题。