Vue.js移动端项目实战

任务 一 在移动商城端将商城首页四个菜单标签一字排开显示且无边框


任务描述：进入移动商城端的商城页面，商城页面显示如图2-1所示。目前上方四个宫格为四宫格排列且带有边框，正常情况应为四个宫格一字排开且无边框如图2-1右图所示，请查明原因并修改。

图2-1 APP商城页面


要求：修改完代码之后，应为四个宫格一字排开且无边框。


提交作品：保存修改之后的页面。


分值：本任务共5分。

答：修改view文件下的home文件的index文件，将 此行代码的2改成4


<
van-grid
:
column-num
=”
4
” :border=”false”
>

任务二 在移动商城端，点击全部商品进入商品列表，点击加载更多无反应。


任务描述：在移动商城端，点击首页菜单栏全部商品进入商品列表页，点击加载更多无反应，正常情况下应加载额外十个商品请查明原因并修改。如图2-2所示。

图2-2 商品列表


要求：点击加载更多后额外加载十个商品，例如原十个商品加载后应为二十个商品。


提交作品：保存修改之后的页面。


分值：本任务共5分。

（在view文件下的productList文件下的productList.vue文件）

答：给点击加载更多添加move点击事件传name，val两个参数，并且给move事件调用index函数传name，val，this.index参数