vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图

vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图

底部导航样式修改

第一步:
vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图
第二步:
vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图

顶部导航矩阵

vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图

  • v-for取代多次复制

vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图

  • 字体图标动态传入

vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图

  • 动态绑定样式

vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图

  • 添加8个

vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图

  • {{}}和{}的区别
    {{}}:
    vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图
    不带任何符号:
    vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图
    {}:
    vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图

首页轮播图

vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图
准备图片数组:
vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图
v-for:下面这种写法图片是无法显示出来的
vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图
加上require:
vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图
展示下标为指定值的图片:
vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图
索引轮播图的实现思路就是:动态改变n的值,让其每隔1秒钟就+1.就实现了轮播的效果了
vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图
查看效果:
vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图

  • 定时器的清除
    当切换到其他页面时,当前页面的定时器应该将其清除掉。
    先定义一个定时器属性:
    vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图
    组件destroyed销毁时调用定时器的清除方法:
    vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图
    轮播点的显示:
    vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图