写点东西记录一下美好时光，上周学习了一下通过
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:
{{item.name}}
修改Script:
好了，到这里就全部完成了。注意swiper组件必须给他设置一个固定高度，不可以使用height:100%之类的。可以在swiper里嵌套scroll-view实现列表.不过长列表左右滑动有卡顿，暂未知道该如何优化。