Vue.js移动端项目实战

Vue.js移动端项目实战任务 一 在移动商城端将商城首页四个菜单标签一字排开显示且无边框任务描述 进入移动商城端的商城页面 商城页面显示如图 2 1 所示 目前上方四个宫格为四宫格排列且带有边框 正常情况应为四个宫格一字排开且无边框如图 2 1 右图所示 请查明原因并修改

大家好,欢迎来到IT知识分享网。

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

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

Vue.js移动端项目实战

图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文件)

Vue.js移动端项目实战

Vue.js移动端项目实战

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

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/94194.html

(0)
上一篇 2024-10-25 10:00
下一篇 2024-10-28 15:26

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信