厦门网站优化推广,国内app开发公司哪家好,ui设计速成培训机构,甘肃水利工程建设管理网站文章目录 1 复习2 最完美的解决方案#xff0c;解决轮播图问题3 开发Floor组件4 把首页中的轮播图拆分为一个共用全局组件5 search模块开发 1 复习
完成商品分类三级列表路由跳转一级路由传参#xff08;合并参数#xff09;完成search模块中对于typeNav的使用#xff08;… 文章目录 1 复习2 最完美的解决方案解决轮播图问题3 开发Floor组件4 把首页中的轮播图拆分为一个共用全局组件5 search模块开发 1 复习
完成商品分类三级列表路由跳转一级路由传参合并参数完成search模块中对于typeNav的使用过渡动画对于typeNav请求次数也进行了优化App.vue根组件swiper插件经常制作轮播图移动端|PC端也可以使用 使用步骤 1)引入相应依赖包 2)页面中的结构务必要有 3)初始化swiper实例给轮播图添加动态效果mock数据通过mockjs模块实现的
2 最完美的解决方案解决轮播图问题
var mySwiper new Swiper (.swiper-container, { //也可以传真实的DOM节点document.querySelector(.swiper-container)//direction: vertical, // 垂直切换选项loop: true, // 循环模式选项// 如果需要分页器agination: {el: .swiper-pagination,//点击小球时候切换图片clickable: true},// 如果需要前进后退按钮navigation: {nextEl: .swiper-button-next,prevEl: .swiper-button-prev,}
})watch数据监听 nextTick监听已有数据的变化仓库中的bannerList $nextTick在下次DOM更新 循环结束之后 执行延迟回调在 修改数据之后 立即使用这个方法获取更新后的DOM $nextTick可以保证页面中的结构一定是有的经常和很多插件一起使用【都需要DOM存在】
3 开发Floor组件 切记仓库当中的state数据格式不能乱写数据格式取决于服务器返回的数据 getFloorList这个action在哪里触发是需要在Home路由当中发的不能在Floor组件内部发action因为需要v-for遍历floor组件 v-for也可以在自定义标签中使用 组件通信方式有哪些【面试频率极高】 props用于父子组件通信自定义事件$ on、$ emit 可以实现子给父通信全局事件总线$ bus全能pubsub-jsvue中几乎不用全能插槽默认插槽、具名插槽、作用域插槽vuex
4 把首页中的轮播图拆分为一个共用全局组件
切记以后在开发项目的时候如果看到某一个组件在很多地方都使用就将其变成全局组件注册一次可以在任意地方使用共用的组件|非路由组件放到components文件夹中
5 search模块开发
先写静态页面 静态组件拆分发请求APIVuex三连环组件获取仓库数据动态展示数据
