邵阳建设网站公司,蜗牛星际做网站服务器,手机网站建设找哪家好,手机模板网站下载目录 一、效果图
1.首页 2.商品列表、分类 二、实现重点讲解
1.首页轮播图
1.1技术实现#xff1a; 1.2.鼠标聚焦切换图片事件 2.首页tab切换
3.商品列表实现
三、项目结构说明 四、总结 一、效果图
1.首页
项目与官方效果没有太大差异#xff1a; 游戏导航#xff1…目录 一、效果图
1.首页 2.商品列表、分类 二、实现重点讲解
1.首页轮播图
1.1技术实现 1.2.鼠标聚焦切换图片事件 2.首页tab切换
3.商品列表实现
三、项目结构说明 四、总结 一、效果图
1.首页
项目与官方效果没有太大差异 游戏导航 2.商品列表、分类 动态切换分类 二、实现重点讲解
1.首页轮播图 1.1技术实现
使用element的走马灯Element - The worlds most popular Vue UI framework 1.2.鼠标聚焦切换图片事件
mouseover事件 !-- 首页广告 --div classfl banner-slidediv idblk_index_main_focus classslideel-carousel height372px changechangeBanner refbannerel-carousel-item v-for(item,index) in banners :keyindexel-image :srcitem styleheight: 372px;cursor: pointer;/el-image/el-carousel-item/el-carouseldiv classdota :classbannerIndex0?curr: mouseoverselBanner(0) stylewidth:191px;DRX冠军皮肤/aa :classbannerIndex1?curr: mouseoverselBanner(1) stylewidth:191px;季中冠军赛通行证/aa :classbannerIndex2?curr: mouseoverselBanner(2) stylewidth:191px;英雄联盟神秘商店/aa :classbannerIndex3?curr: mouseoverselBanner(3) stylewidth:191px;净雪之月2023/a/div/div/div
通过element事件指定图片切换显示
selBanner(index){//切换轮播图this.$refs.banner.setActiveItem(index);}, 2.首页tab切换 首先准备两套数据
newProducts:[//新品上架{name:太空律动 “电音酒桶” 古拉加斯,price:89.00,cover:require(../../../public/img/N-lol-1-100000-156045.jpg)},{name:太空律动 “噪音女王” 丽桑卓,price:89.00,cover:require(../../../public/img/N-lol-1-100000-156063.jpg)},{name:太空律动 “魔音海妖” 娜美,price:89.00,cover:require(../../../public/img/N-lol-1-100000-156029.jpg)},{name:太空律动 “律动队长” 提莫,price:109.00,cover:require(../../../public/img/N-lol-1-100000-156018.jpg)},{name:太空律动 “万能舞王” 崔斯特,price:89.00,cover:require(../../../public/img/N-lol-1-100000-156053.jpg)},{name:太空律动 “爱乐之子” 塔里克,price:89.00,cover:require(../../../public/img/N-lol-1-100000-156071.jpg)},{name:太空律动 “创乐之神” 奥恩,price:89.00,cover:require(../../../public/img/N-lol-1-100000-156039.jpg)},{name:巅峰之星 布里茨,price:89.00,cover:require(../../../public/img/N-lol-1-100000-155390.jpg)}],recommendProducts:[//热门推荐{name:光明哨兵 格雷福斯,price:99.00,cover:require(../../../public/img/N-lol-1-100000-149090.jpg)},{name:K/DA 卡莎,price:79.00,cover:require(../../../public/img/2-145014-9.jpg)},{name:K/DA ALL OUT 卡莎,price:79.00,cover:require(../../../public/img/N-lol-1-100000-147358.jpg)},{name:玉剑传说 无极,price:79.00,cover:require(../../../public/img/pkg-9336.jpg)},{name:战斗学院 孙悟空,price:79.00,cover:require(../../../public/img/N-lol-1-100000-148255.jpg)},{name:K/DA 阿狸,price:79.00,cover:require(../../../public/img/N-lol-1-100000-118936.jpg)}],
点击tab切换动态更新数据显示
ul classplate-tit clearfixli clickselTab(1) :classtabIndex 1?current:a classplate-link新品上架/a/lili clickselTab(2) :classtabIndex 2?current:a classplate-link热门推荐/a/li/ul
selTab(index){//新品上架、热门推荐 tab数据切换if(this.tabIndex index){return;}if(index 1){this.tabData this.newProducts;}else if(index 2){this.tabData this.recommendProducts;}this.tabIndex index;},
3.商品列表实现 分类定义
menus:[{id:1,name:全部分类},{id:2,name:英雄},{id:3,name:炫彩皮肤},{id:4,name:表情},{id:5,name:海克斯及其他},{id:6,name:云顶之弈},{id:7,name:皮肤},{id:8,name:道具},{id:9,name:守卫眼皮肤}],
首页点击分类菜单路由通过query属性携带参数分类id
selMenu(item){//切换菜单this.$router.push({path: /productList,query: {id: item.id}})}
商品列表页面接收获取参数分类id:
mounted() {//获取分类id 参数if(this.$route.query.id){this.menuId parseInt(this.$route.query.id);}//获取商品列表this.getData();},
查询对应分类商品列表
getData(){//获取分类对应商品if(this.menuId 1){//所有分类this.data this.productList;}else{this.data [];this.productList.forEach(item{if(item.typeId this.menuId){this.data.push(item);}})}}
其中商品列表定义typeId表示其所属分类的id
productList:[//商品列表{typeId: 1,name:熊猫 提莫,img:require(../../../public/img/N-lol-1-100000-122946.jpg),price:69},{typeId: 1,name:山海绘卷 克格莫,img:require(../../../public/img/N-lol-1-111869-165721.jpg),price:89},{typeId: 1,name:山海绘卷 塔姆,img:require(../../../public/img/N-lol-1-111869-165722.jpg),price:89},{typeId: 1,name:山海绘卷 巴德,img:require(../../../public/img/N-lol-1-111869-165723.jpg),price:89},{typeId: 1,name:山海绘卷 莉莉娅,img:require(../../../public/img/N-lol-1-111869-165720.jpg),price:89},{typeId: 3,name:山海绘卷 克格莫 靛青,img:require(../../../public/img/N-lol-1-111869-165735.jpg),price:20},{typeId: 3,name:山海绘卷 克格莫 赤金,img:require(../../../public/img/N-lol-1-111869-165734.jpg),price:20},{typeId: 3,name:山海绘卷 克格莫 葱青,img:require(../../../public/img/N-lol-1-111869-165736.jpg),price:20},{typeId: 2,name:明烛 米利欧,img:require(../../../public/img/N-lol-1-111869-164325.jpg),price:45},{typeId: 2,name:祖安怒兽 沃里克,img:require(../../../public/img/1-19-9.jpg),price:10},{typeId: 2,name:迅捷斥候 提莫,img:require(../../../public/img/1-17-9.jpg),price:10},{typeId: 2,name:符文法师 瑞兹,img:require(../../../public/img/1-13-9.jpg),price:10},{typeId: 2,name:正义天使 凯尔,img:require(../../../public/img/1-10-111.jpg),price:10},]
三、项目结构说明
项目以vue项目创建前端某些元素使用element项目启动执行的命令为
npm installnpm run dev当然命令可以修改为npm run serve没啥区别
注意npm install 成功了再执行 npm run dev 启动项目 结构如下截图项目已经集成和实现了需要请求后端接口的一切功能所以无须花费精力去考虑前端如何去对接后端和接口可以把一切精力放在实现前端界面设计上来。
这样不懂后端的伙伴也省心省力接口请求只需按照模板去copy就好无非就是get/post/delete/put等请求方式和参数传递的差别当然不明白的可以细问作者。
项目结构还是分为顶部具体功能显示容器底部页面存放于src/page目录下看目录命名就能明白其含义具体功能页面在views目录下。
路由在router目录中。
路由权限也是很重要的一个功能为permission.js所有页面跳转都会经过其拦截有人问路由权限有什么用好说比如订单页面或个人中心页面吧肯定是需要登录才能访问的首页却是无需登录即可访问的那么就可以在permission.js里面获取登录token有token即表示已经登录可以访问订单或个人中心页面否则跳转登录页等。 四、总结
后续不定期将不断完善和增加功能页面敬请期待。
关注作者及时了解更多好项目
作者主页也有更多好项目分享
获取源码或如需帮助可通过博客后面名片作者即可 其他作品集合
《vueelementui实现app布局小米商城样式美观大方功能完整》《vue完美模拟pc版快手实现短视频含短视频详情播放》《vueelement实现美观大方好看的音乐网站仿照咪咕音乐网》 《vue实现功能完整的购物商城商品零食、电商通用商城》《vueelement实现蔬菜、水果、电商商城》《vueelement简单实现电商商城网站模仿小米电商商城》《vue实现美观大方的动漫、cos、帖子类型网站》《vue实现好看的相册、图片网站》《高度仿PC版《微信读书》好看的小说、读书网站》《vueelement实现非常好看的鲜花网站商城页面完整样式美观》《vueelementuispringboot前后端分离实现通用商城管理后台》《微信小程序日记、微信小程序个人空间、个人日记》《vueelement模仿腾讯视频电影网站》《vueelement高度仿照QQ音乐完美实现PC端QQ音乐》《vueelement详细完整实现个人博客、个人网站》《vueelementuispringboot前后端分离实现学校帖子网站学校大作业》《vueelementui实现U袋网-完整版》《vueelementelectron仿微信实现》《vueelement模仿电商商城前后端分离实现下单微信扫码支付》《electronvueelementui实现类似QQ窗口靠边自动边缘隐藏》《微信小程序仿唯聚时代微信小程序商城》《jquerybootstrap完整丰富样式开发框架源码各种现成样式简单易用》《htmlcss响应式旅游主题网站模板旅游网站企业文化新闻类网站》《csshtml各种动态、动画、3D相册等7件套》《仿华为电商商城官网华为超级新品日demo,大屏霸气且简洁》《vueelement简单实现商城网站首页模仿电商商城》《vueelementui实现非常好看的博客、网站首页网站模板》《elementuivue实现经典管理系统布局框架拿来即用》《简系统登录页模板htmlvueelementui》《vueelementui完美实现博客、网站、个人网站高仿“张凯博客”》《vueelementui完美实现后台管理系统的左、右、顶部菜单布局》《html5css3实现3D正方体动画相册2种3D旋转木马立体动画相册表白文字加动画爱心炫酷万花筒五件套含音乐》《后端使用springbootmavenshiromybatismysql前端使用H-ui.admin_v3.1.3.1快速实现管理后台功能》《springbootthymeleafmavenhtmlcss实现精美大方好看官网模板完整源码》《htmlcss实现好友列表类似QQ群聊成员列表》
