用vue仿京东的商品详情头部vue项目nav导航栏的实现

来源：蜘蛛抓取(WebSpider) 时间：2020-07-17 02:43 标签： vue项目nav导航栏的实现

   路由配置如上时子路由匹配到“/table”时组件能加载出来，而不是匹配“/home/table”;


   综上所述，设置路由嵌套时路由设置和跳转参数设置两者必须统一，才能保证组件正确加载！

将页面拆分成几个部分每个部汾封装成一个组件；
其他页面可以共用这些组件，这些组件放到src>component目录中；

商品列表可以是一个单独的页面所以将其放到src>views目录中；

可以有┅个有名字，另一个无名字;
两个都无名字会渲染成： 张三23 张三23

加载商品列表信息；减少对后台接口的依赖；
创建mock文件夹存放这些内容;goods.json文件中不要写注释，不要有多余的逗号等其他符号；

  • msg为成功或错误时的信息
  • result为返回数据是一个数组

axios获取数据并渲染

在 mounted 时调用获取数据的方法

//组件中的data是一个函数，避免组件之间影响；实例组件可以是一个对象

将商品信息数据数组通过v-for渲染到页面

<!--图片需要动态绑定不能直接寫src=""，这样会因页面渲染太快而导致图片未加载-->

通过索引实现价格条件选中样式;

价格筛选条件的响应式布局

//响应式布局：点击显示价格筛选條件 //价格选择：菜单样式改变；响应式时：关闭价格筛选关闭遮罩层 //响应式布局：点击关闭价格选择和遮罩层
  • 图片不会一次性全部加载，滚动到屏幕上时加载

main.js中引用,并添加赖加载时引用的svg图片

这些图片的颜色可以改变,打开.svg文件修改fill

我要回帖

更多关于 vue项目nav导航栏的实现 的文章

 

随机推荐