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

我不是女神ヾ 2022-02-03 04:13 434阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70 1][]

**实现代码：**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70 2][]

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

![20190508185611491.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70 4][]

![20190508190533577.png][]

**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;
    	},
    	//传值必须写state
    	storeItemInfo(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也能帮到你们啊。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70]: /images/20220203/4e68763802a04d16a4262cbb843e6bb3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70 1]: /images/20220203/4902ff14493947aca0b6182d65cc2d64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70 2]: /images/20220203/12c31f08e2ed4e02a7c06bdacfa7fa45.png
[20190508185611491.png]: /images/20220203/7fd1d779d2c14bbcac4180469beec774.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70 3]: /images/20220203/44e41443da054e5da7a1912b2b53ed94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2ODQ3Mw_size_16_color_FFFFFF_t_70 4]: /images/20220203/aa022df8faa545699318801f40461074.png
[20190508190533577.png]: /images/20220203/98e8668de2f141e79e875274ab28676f.png