mpvue实战-手势滑动导航栏

写点东西记录一下美好时光，上周学习了一下通过mpuve开发微信小程序，看完文档，就准备撸起袖子加油干的时候，一开始就被支持手势滑动的导航栏给搞懵逼了。求助一波百度和谷歌未果后，只能自己动脑动手！为了给像我一样的小菜鸟，提供一下思路，就记录一下吧！可以优化的地方，请大神不吝赐教。

1.mpvue是什么？
额，这个还是直接看文档：mpvue 官方站点

2.效果预览
不耽误大神时间，没什么亮点，直接上效果图，有兴趣再往下看吧！一切从简。简陋的demo.

3.实战过程

创建示例项目

vue init mpvue/mpvue-quickstart slidebar

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

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

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

添加样式：

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

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

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

修改Script:

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