vue滑动内容切换导航

主要运用到的技术：vue ，vuex，swiper ，vuex-persist1：vue-cli 创建的项目中 helloword中引用自定义的两个组件 nav.vue swiper.vue 代码如下标题2.抒写nav.vue 和 swiper 组件因为没有安装css提示sublime会有提示这个不用在意nav.vue swiper.vue 这里引用了swiper的js...

feiyue1010

9523人浏览 · 2018-07-25 17:50:39

feiyue1010 · 2018-07-25 17:50:39 发布

主要运用到的技术：vue ，vuex，swiper ，vuex-persist

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

helloword.vue 标题

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

nav.vue

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

swiper.vue

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

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

vuex vuex-persist

5.效果

效果图

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^