vue实现商品详情页功能之商品选项卡

用户点击商品进入商品详情页，默认显示第一个小图对应的大图，然后鼠标滑到小图上，大图也会发生改变，实现效果如下：

实现代码：

shopitem.vue的template（HTML）,上面是大图，下面是小图，鼠标滑动到小图上，触发getUrl事件（参数是小图的show属性，索引）：

item.json文件（我的数据文件，默认第一个小图的show为true，默认大图显示第一张。大图和小图的路径一样的，只是css控制的图片大小不一样）：

shopitem.vue的<script>方法（fechData（）是用vue-resource请求后台数据，即本地json文件。本地json文件存放在static文件夹里。）

vuex（状态管理）的store.js文件代码，实现数据持久化：

//store 相当于仓库  一个组件使用并改变数据，另一个组件使用的是前一个组件改变后的数据
//所以这就是vuex 实现了不同组件（不同页面）的数据共享//引入vuex
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);// 用Vuex实现数据的持久化/*  1.state 在vuex中主要用于存储数据 */
var state={num:1,info:[]
}// 2.mutation里面放的是方法，方法主要用于改变state里面的数据
var mutations={Count(){++state.num;},//传值必须写statestoreItemInfo(state,data){state.info=data;
//      state.list.push(data);}
}// 3.类似计算属性，改变state里面的count数据的时候，会差发getters里面的方法，获取新的值var getters={computedCount: (state) => {return state.count*2;}
}// 3.vuex 实例化Vuex.Store
const store = new Vuex.Store({state,  /* 简写 */mutations,getters
})//4.暴露store
export default store;

这就是实现该效果的全部代码，用到了es6函数，vuex，请求数据。反正我现在终于有点儿体会到了es6函数的好处了，xiwang也能帮到你们啊。

vue实现商品详情页功能之商品选项卡相关推荐

SpringBoot--网上商城项目（自定义的参数解析器、购物车后台前台功能、商品详情页）
目录一.自定义的参数解析器关于Mybatis-plus时间字段代码生成问题报错信息:Caused by: java.lang.IllegalStateException: No typehand ...
尚硅谷谷粒商城第十二天商品详情页及异步编排
1. 商品详情当用户搜索到商品,肯定会点击查看,就会进入商品详情页,接下来我们完成商品详情页的展示. 商品详情浏览量比较大,并发高,我们会独立开启一个微服务,用来展示商品详情. 1.1. 创建mod ...
仿商城商品生成分享海报图片和识别图中二维码并跳转商品详情页
购物商城里面的商品分享给朋友的时候会生成一张海报图片,图片上附带这二维码图片,朋友拿到这张图片扫描上面的二维码就可以进入商品详情页查看此商品了.今天来做一下这种功能,先生成商品海报图片,然后长按这张图 ...
高并发处理之商品详情页
首页博客专栏·视频下载论坛问答代码直播能力认证高校会员中心收藏动态消息创作中心高并发处理之商品详情页卜大伟 2019-01-18 11:13:47 2488 收藏 ...
乐优商城笔记六：商品详情页
使用模板引擎 Thymeleaf + nginx 完成商品详情页静态化完成乐优商城商品详情页搭建商品详情页微服务创建子工程 GroupId:com.leyou.service ArtifactI ...
Django项目实战——14—(列表页热销排行、商品搜索、Haystack建立数据索引、渲染商品搜索结果、商品详情页)
1.列表页热销排行根据路径参数category_id查询出该类型商品销量前二的商品. 使用Ajax实现局部刷新的效果. 查询列表页热销排行数据请求方式请求参数:路径参数响应结果:JSON {& ...
商品详情页动态渲染系统：大型网站的多机房4级缓存架构设计
124_大型电商网站的商品详情页的深入分析之前,咱们也是说在讲解这个商品详情页系统的架构缓存架构,高可用服务商品详情页系统,我们只是抽取了其中一部分来讲解,而且还做了很大程度的简化主要是为了用 ...
美多商城之商品(商品详情页)
六.商品详情页 6.1 商品详情页分析和准备 6.1.1. 商品详情页组成结构分析 1.商品频道分类已经提前封装在contents.utils.py文件中,直接调用方法即可. 2.面包屑导航已经提 ...
电商项目-商品详情页的实现
1. 需要做的事情 l 商品详情页实现 1.商品查询服务事项 2.商品详情展示 3.添加缓存 2. 实现商品详情页功能 2.1. 功能分析 1.Taotao-portal接收页面请求,接收到商品id. ...

vue实现商品详情页功能之商品选项卡

vue实现商品详情页功能之商品选项卡相关推荐

最新文章

热门文章