vue滑动内容切换导航

主要运用到的技术:vue ,vuex,swiper ,vuex-persist

1:vue-cli 创建的项目中 helloword中引用自定义的两个组件 nav.vue swiper.vue 代码如下

vue滑动内容切换导航标题

2.抒写nav.vue 和 swiper 组件 因为没有安装css提示sublime会有提示这个不用在意

nav.vue 

vue滑动内容切换导航

swiper.vue  这里引用了swiper的js css大家可以上官网下载

vue滑动内容切换导航

vue滑动内容切换导航

3. 创建导航组件这个大家自己创建就可以

4.为了做到刷新后还能显示操作位置,使用vuex-persist 和vuex 把数据保存在vuex中

vue滑动内容切换导航

5.效果

vue滑动内容切换导航

github地址:https://github.com/zhoufeiyue/touchTab.git