• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
空581 显示全部楼层 发表于 2021-10-26 13:16:04 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了vue实现商品详情页功能之商品选项卡的详细代码,供各人参考,详细内容如下
用户点击商品进入商品详情页,默认表现第一个小图对应的大图,然后鼠标滑到小图上,大图也会发生改变,实现效果如下:


实当代码:
shopitem.vue的template(HTML),上面是大图,下面是小图,鼠标滑动到小图上,触发getUrl事件(参数是小图的show属性,索引):

item.json文件(我的数据文件,默认第一个小图的show为true,默认大图表现第一张。大图和小图的路径一样的,只是css控制的图片巨细不一样):

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



vuex(状态管理)的store.js文件代码,实现数据持久化:
  1. //store 相当于仓库  一个组件使用并改变数据,另一个组件使用的是前一个组件改变后的数据
  2. //所以这就是vuex 实现了不同组件(不同页面)的数据共享
  3. //引入vuex
  4. import Vue from 'vue';
  5. import Vuex from 'vuex';
  6. Vue.use(Vuex);
  7. // 用Vuex实现数据的持久化
  8. /*  1.state 在vuex中主要用于存储数据 */
  9. var state={
  10. num:1,
  11. info:[]
  12. }
  13. // 2.mutation里面放的是方法,方法主要用于改变state里面的数据
  14. var mutations={
  15. Count(){
  16.   ++state.num;
  17. },
  18. //传值必须写state
  19. storeItemInfo(state,data){
  20.   state.info=data;
  21. //  state.list.push(data);
  22. }
  23. }
  24. // 3.类似计算属性,改变state里面的count数据的时候,会差发getters里面的方法,获取新的值
  25. var getters={
  26.   computedCount: (state) => {
  27.     return state.count*2;
  28.   }
  29. }
  30. // 3.vuex 实例化Vuex.Store
  31. const store = new Vuex.Store({
  32.   state,  /* 简写 */
  33.   mutations,
  34.   getters
  35. })
  36. //4.暴露store
  37. export default store;
复制代码
这就是实现该效果的全部代码,用到了es6函数,vuex,哀求数据。反正我如今终于有点儿领会到了es6函数的好处了,希望也能帮到你们啊。
以上就是本文的全部内容,希望对各人的学习有所资助,也希望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作