4.27学习笔记

三级联动组件的路由跳转与参数传递

三级联动用户可以点击的：一级分类，二级分类，三节分类，当你点击的时候
home模块跳转到search模块的时候，会把产品的相关信息通过参数的方式传递过去

        goSearch(ev){
            const { categoryname, category1id, category2id, category3id } = ev.target.dataset;
            const query = {categoryName: categoryname}
            const location = {name:'search'}
            if(categoryname){
                if(category1id){
                    query.category1Id = category1id
                }else if(category2id){
                    query.category2Id = category2id
                }else{
                    query.category3Id = category3id
                }
            }
            location.query = query;
            this.$router.push(location)
        }

1.开发Search模块的TypeNav的过渡动画效果
a.必须有v-if或者v-show属性
b.transation包裹

2.合并params与query参数

3.开发home首页当中的listContainer组件与Floor组件
服务器返回的数据只有商品分类的数据，对于这两个组件服务器没有返回数据，需要mock
a. 把JSON数据格式引入进来【JSON数据格式根本没有向外暴露，但是可以引入】
b.webpack默认对外暴露的：图片，JSON数据格式
c.mock数据：第一个参数请求地址，第二个参数：请求数据
Mock.mock(‘/mock/banner’, {code:200, data: banner});//模拟首页大轮播图
d.mock文件在main.js中引入，并执行一次
import ‘@/mock/mockServe’

4.ListContainer组件开发的重点
a.安装swiper的5版本
b.导入JS/CSS
c.页面载入之后，结构必须完整
d.new Swiper实例

5.解决轮播图问题，使用watch+nextTick
数据监听（watch）， v-for结构渲染完成nextTick
$nextTick: 在下次dom更新循环之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的dom。
$nextTick:可以保证页面中的结构一定是有的，经常和很多插件一起使用【都需要dom存在了】

  watch:{
    bannerList:{
        handler(newValue, oldValue){
            this.$nextTick(()=>{
                new Swiper (document.querySelector('.swiper-container'), {
                    loop: true, // 循环模式选项
                    
                    // 如果需要分页器
                    pagination: {
                    el: '.swiper-pagination',
                    },
                    
                    // 如果需要前进后退按钮
                    navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                    },
                    
                    // 如果需要滚动条
                    scrollbar: {
                    el: '.swiper-scrollbar',
                    },
                })
            })
        }
    }
  }