Vue实战项目 详情页 Detail

点击 GoodListItem 跳转到详情页

创建 detail 视图，配置路由关系，点击 GoodListItem ，路由跳转到相应的 detail 界面。每个 GoodListItem 都有一个不同的 iid ，通过 iid 请求不同 GoodListItem 的数据。

1
this.$router.push('/detail'+this.goodsItem.iid)

1 导航栏

封装一个 DetailNavBar.vue，import navbar 对象；插槽

1）left 是一个返回图标，点击图标，页面返回到上一步

1
2
3
goBack() {
    this.$router.back();//go(-1)
}

2）center 是一些 title ，v-for 遍历titles ，给个 title 添加个点击激活 active属性

2 轮播图

根据请求数据

1）为 detail 封装一个网络请求相关的 detail.js 文件。

2）在 Detail.vue 的 created 声明函数中，请求数据。

问题一：后端请求的图片太大，占满了整屏幕，实际可以参考设计图的。这里直接轮播图的高度设置为固定值，然后overflow：hidden多余的图片

问题二：点击任何一个 GoodListItem ，进来的 Detail 页都是同一张。—》因为 keep-alive 的使用，就不会再执行 created 的方法 和 $router 了。

解决：<keep-alive exclude="Detail">

3 商品信息

抽离组件数据，将杂乱无章的数据，抽离成一个对象。

1) 比如这个商品信息，在networ的 details.js 将数据抽离成一个 Goods 对象

1
2
3
4
5
6
7
8
9
10
11
12
export class Goods {
    constructor(itemInfo, columns, services) {
        this.title = itemInfo.title;
        this.desc = itemInfo.desc;
        this.newprice = itemInfo.price;
        this.oldprice = itemInfo.oldprice;
        this.discount = itemInfo.discountDesc;
        this.columns = columns;
        this.services = services;
        this.realPrice = itemInfo.lowNowPrice;
    }
}

2) 在 Detail 组件中created 找那个获取数据，最后将整理之后的数据存到 goods 对象中

1
2
3
4
5
6
7
created() {
  // 获取详情页的数据
  getDetails(this.iid).then((res) => {
    const data = res.result
    this.goods =new Goods(data.itemInfo, data.columns, data.shopInfo.services)
  });
},

可以通过dev-tool 查看，数据变得清晰明了

image-20200727202825522

3）新建 DetailBaseInfo 组件，展示商品信息，最后暴露给 Detail.vue

4 商店shop 信息

封装 DetailShopInfo 组件,展示商店信息，最后暴露给 Detail.vue

4.1 filters 数据过滤

比如后端传来的总销量数据是一个10 进制数据，但是为了更好的显示数据，要求超过一万的数据转为为万数（123456 —>1.2 万）

1
2
3
4
5
6
filters: {
  sellNum(value){
    if(value < 10000 ) return value
    return (value/1000).toFixed(1) + '万'
  }
}

5 商品详情页

封装 DetailGoodsInfo 组件，展示商品详情页

【问题】 商品详情页有许多照片需要展示，可能造成 better-scroll 的计算高度问题。因此需要监听图片的加载，然后 refresh。

1.监听 DetailGoodsInfo 的img

2.加载完图片，emit Detail.vue imageLoad，在 Detail.vue 里面实现这个方法，即调用 scroll 的 refresh 方法

  • 图片数量太多，每一张图片的 load 之后都需要 emit 效率太低，影响性能和用户体验，只需要所有图片加载完 emit 一次。
    • 通过debounce 防抖
    • watch 已经加载的图片数量，当图片加载到最后一张照片，即加载所有照片。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
data() {
  return {
    count: 0,
    imagesLength: 0,
  };
},
methods: {
  imageLoad() {
    // 判断所有的图片都加在完了，只进行一次回调
    if (++this.count === this.imagesLength) {
      this.$emit("imageLoad");
    }
  },
},
watch: {
  // 监听 获取图片个数
  detailInfo() {
    for (let i in this.detailInfo.detailImage) {
      this.imagesLength += this.detailInfo.detailImage[i].list.length;
    }
  },
},

6 商品参数信息展示

1 请求数据 ；2 封装 DetailParamInfo 组件，展示商品详情页

8 商品评论信息

8.1 格式化时间戳

服务器一般返回时间都是一个时间戳 value（以 unix 时间元年为起点），但是页面展示一般都是具体的格式比如（yyyy-MM-dd）。

1.将时间戳（单位 s）转化为 Date（单位 ms） 类型：

const date = new Date（value*1000）

2.将 date 进行格式化，封装一个 formate 函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/**
 * 对时间进行格式化 date 是传入的时间戳， fmt 是传入的格式，比如 "yyyy-MM-dd"
 */
export function formatDate(date, fmt) {
    // 1. 获取年份
    // y+ 匹配一个或者多个 y

    if (/(y+)/.test(fmt)) {
        // RegExp.$1 是一个全局对象，它指的是上面式子比配的对象，比如传的 fmt 是"yyyy-MM-dd",RegExp.$1 就是 "yyyy"
        // date.getFullYear() + '' 将数字转化为字符串
        // replace 的第二个参数就是根据传入的年份位数，来获取相应的年份合适
        // 按照传入的年 计算出 4位数的年份
        // 2019 
        // yyyy 2019
        // yyy  019
        // yy  19
        // y   9
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));

    }
    
  //2. 获取月、日、时、分、秒
    let o = {
        // M+ 匹配一个或者多个 M
        //  getMonth 得到的月数是从 0 开始，所以 + 1
        'M+': date.getMonth() + 1,

        'd+': date.getDate(),

        'h+': date.getHours(), // 有的语言区分大小写，h 和 H 代表不一样

        'm+': date.getMinutes(),

        's+': date.getSeconds()

    };

    for (let k in o) {

        if (new RegExp(`(${k})`).test(fmt)) {

            let str = o[k] + '';

            // 如果匹配的 RegExp.$1 是一位，比如 M/d/h ,就不需要 padLeftZero 处理
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));

        }

    }

    return fmt;

};

// 如果 date 是 4:4:4 需要转化为 04:04:04 因此年份和 月、日、时、分、秒的处理不一样
// 比如 str 是 04 ，0004 需要截取前两位 —— 04
function padLeftZero(str) {

    return ('00' + str).substr(str.length);

};

9 商品推荐信息展示

1.获取数据，接口换成了：path:’recommend’。把数据存储在 recommendInfo 里。

2.GoodList 的布局和 推荐页面布局一样，因此可以直接使用 GoodList 组件，*但是 *GoodList 里面展示的数据结构和 recommendInfo 存在差异

3.在存在差异的地方使用 计算属性进行判断选择

1
2
3
4
5
6
7
8
9
10
11
 //比如img 的路径不一致

<img :src="getGoodImage"/>
    
computed: {
    getGoodImage() {
      return this.goodsItem.image || this.goodsItem.show.img;
        // 尽量把层级低的写在前面
      // return this.goodsItem.show.img || this.goodsItem.image; 报错
    },
  },

【问题】： GoodListItem 监听图片 load 事件发送给 Home.vue ，但是因为 Detail 中复用了GoodListItem 组件， Detail 也会触发 load 事件，但是这个事件最终被 Home.vue 接收了。

【方法一】判断路由的路径，为不同路径 emit 不同方法

1
2
3
4
5
6
7
8
9
imageLoad() {
      // 根据路由判断是哪个路径 emit 哪个事件
     if (this.$route.path.includes("/home")) {
         this.$bus.$emit("homeItemImageLoad");
     } else if (this.$route.path.includes("/detail")) {
         this.$bus.$emit("detailItemImageLoad");
       }
      this.$bus.$emit("ItemImageLoad");
    },

【方法二】利用事件总线的 $bus$off在路由离开组件的时候，取消监听 itemImageLoad

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
mounted() {
  // 监听商品 item 中图片加载完成
  const newRefresh = debounce(this.$refs.scroll.refresh, 50);
  // 对监听事件进行保存
  this.itemImageListener = () => {
    newRefresh();
  }
  this.$bus.$on("itemImageLoad",this.itemImageListener );
},

 deactivated() {
  // 离开 Home 路由取消全局事件监听
  // 如果参数只写一个事件名称，就会把所有地方相关事件的监听取消，因此需要传入一个函数
  // 也就是离开的时候只取消对该函数的监听
  this.$bus.$off("itemImageLoad" ,this.itemImageListener)
},

在 detail 的 mounted 函数里进行事件监听

1
2
3
4
5
6
7
8
9
10
11
12
13
mounted() {
  const newRefresh = debounce(this.$refs.scroll.refresh, 50);
  this.itemImageListener = () => {
    newRefresh();
  };
  this.$bus.$on("itemImageLoad", this.itemImageListener);
},

destroyed() {
  // 取消全局事件监听
  // 因为 Detail 没有 keep-alive，所以无法触发deactivated 需要在 destory 取消
  this.$bus.$off("itemImageLoad", this.itemImageListener);
},

9.2 混入 mixin

在 home 和 detail 中的mounted中的代码一模一样，所以可以考虑混入（mixin）。类有相同的方法用继承，对象由相同的方法考虑 mixin。

组件对象中的声明周期函数和 mixin 中会合并,但是 methods 里的方法不会合并会覆盖。

1.创建混入对象，复用的部分写在混入对象里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 定义一个混入对象
// 组件中的 option 都可以写入混入，当出现同名选项的时候，会进行合并
import { debounce } from "common/utils";
export const itemListenerMixin = {
    data() {
        return {
            itemImageListener: null,
        }
    },
    mounted() {
        let newRefresh = debounce(this.$refs.scroll.refresh, 100);
        this.itemImageListener = () => {
            newRefresh();
        };
        this.$bus.$on("itemImageLoad", this.itemImageListener);
    }
}

2 在组件中暴露混入对象

1
2
3
import { itemListenerMixin } from "common/mixin";
mixins: [itemListenerMixin],
mixins: [itemListenerMixin, backTopMixin],

10 点击标题滚到对应内容 (联动效果)

10.1 点击标题滚动到相应的内容

点击标题滚动到相应的内容 —》 获取相应 Dom 的 offsetTop

怎么获取 Dom 的 offsetTop

当每个组件对象获取数据之后，还需要渲染 DOM ，只有在 DOM 完全渲染之后，得到的 offsetTop 才是准确的，在生命周期函数中，update 钩子函数会在 数据更改导致的虚拟 DOM 重新渲染和打补丁调用，但是它不仅会多次调用，而且updated 不会保证所有的子组件也都一起被重绘。因此推荐使用 vm.$nextTick

vm.$nextTick( [callback] )

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

1
2
3
4
5
6
7
8
9
10
11
updated() {
   //只是根据最新的数据，渲染了Dom ，但是图片可能还没有加载完
  this.$nextTick(() => {
  //每次进来重新赋值
  this.themeTopYs = [];
  this.themeTopYs.push(0);
  this.themeTopYs.push(this.$refs.params.$el.offsetTop);
  this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
  this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
  });
},

【问题】然而即使是在 update 中 使用 $nextTick 依然无法获取正确的 offsetTop，经过排查是 DetailGoodsInfo组件中的图片未加载完全导致。

【方案】将获取 offsetTop 的代码写在监听 DetailGoodsInfo 加载图片的 imageLoad 中

1
2
3
4
5
6
7
8
9
imageLoad() {
  this.newRefresh();
  
  this.themeTopYs = [];
  this.themeTopYs.push(0);
  this.themeTopYs.push(this.$refs.params.$el.offsetTop);
  this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
  this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
},

10.2 滚动页面，相应标题被激活

1 通过 Scroll 对象的scroll 获取position.y

2 将拿到的 position.y 和 themeTopYs 里面的数值进行比较，确定每个标题对应的数值区间。

数值区间可以通过遍历 themeTopYs ，普通做法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 1 增强型 for 循环 i 是 String 类型
// 2 区间分离 ：前3个标题的 y 值范围是闭区间，第 4 个标题的y值区间主要下界——》通过比较 i 和 length-1 的关系分类讨论
// 3 多次频繁操作 ：currentIndex 记录 i 值，只有i值发生变化时，再切换。
for (let i = 0; i < length; i++) {
        if (
          this.currentIndex !== i &&
          ((i < length - 1 &&
            positionY >= this.themeTopYs[i] &&
            positionY < this.themeTopYs[i + 1]) ||
            (i === length - 1 && positionY >= this.themeTopYs[i]))
        ) {
          this.currentIndex = i;
          this.$refs.navbar.currentIndex = i;
        }

hack 做法

空间换时间

1
2
3
4
5
 // 在 themeTopYs尾巴 push 一个极大数
 this.themeTopYs.push(Number.MAX_VALUE);

//不需要区间分离
 if( this.currentIndex !== i && positionY >= this.themeTopYs[i] && positionY < this.themeTopYs[i + 1])...

3 将每个数值空间 和 navBar 的currentIndex 一一对应

11 底部工具栏

二倍精灵图（雪碧图）

1）计算几倍图：在 ps 中打开图片，依次打开图像——》图像大小，记录此时精灵图大小（width 是44px），而网页中图片预留位置是（width：22px），因此是二倍图

2）将这个精灵背景图等比例缩放到原来宽高的一半。即为（width：22px）

3）此时页面应显示的是缩放后的图片，打开 f8 找到它的坐标，将缩放后的xy坐标作为背景定位坐标

1
2
3
.bar-left .shop {
  background-position: 0 -98px;//测量出图标距离顶部的y是98px
}

4）background-size的宽度是缩放后的宽度。这样，就完成了精灵二倍缩放，如果是三倍，将原图尺寸除以三就可以。

1
2
3
4
5
display: block;
width: 22px;
height: 22px;
background: url("~assets/img/detail/detail_bottom.png") no-repeat;
background-size: 22px;

12 回到顶部

12.1 复用 backTop 组件

1）定义变量 isShowBackTop 显示或者隐藏图标。

2）BACK_POSITION 是导入的常量，当滚动距离大于 改值，图标就显示

3）在Scroll 的 scroll 方法里面获取滚动的 y 值，和 BACK_POSITION 进行比较

4）监听点击事件，点击图标，调用scrollTo(0, 0 300),滚动头部。

12.2 mixin

在Home 和 Detail 中都需要用到回到顶部功能，因此可以考虑将这部分功能代码写入 mixin 中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import BackTop from "components/content/backTop/BackTop";
import { BACK_POSITION } from "common/const";
export const backTopMixin = {
    components: {
        BackTop
    },
    data() {
        return {
            isShowBackTop: false,
        }
    },
    methods: {
        btnClick() {
            this.$refs.scroll.scrollTo(0, 0);
        },
        listenShowBackTop(position) {
            //  判断BackTop是否显示
            this.isShowBackTop = -position.y > BACK_POSITION;
        }
    }
}

13 点击添加购物车

1） 监听底部添加按钮；2）addToCart 中获取商品信息，将信息存储在 vuex 里面

13.1 vuex

暴露、 注册、 新建 store 对象 、挂载到app

mutations 中的每个方法尽可能完成的时间比较的单一，如果功能复杂，比如下面的addCart 方法里面。跟踪 mutations 就不知道 addCart 是商品的count+1，还是向 countList 里面添加新的商品。

1
2
3
4
5
6
7
8
9
10
11
12
13
mutations: {
    addCart(state, payload) {
        // playload 是新添加的商品
        // find 函数会将查找到的 product 信息返回给 oldProudct,否则返回 undefined
        let oldProduct = state.cartList.find(item => item.iid === payload.iid)
        if (oldProduct) {
            oldProduct.count++
        } else {
            payload.count = 1
            state.cartList.push(payload)
        }
    }
}

mutations 重构：mutations处理数据的改变，每个方法处理一种功能；添加商品相当于异步操作（因为页面并没有刷新）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
mutations: {
		// 增加 count
       addCount(state, payload) {
           payload.count++
       },
       // 添加商品
       addToCart(state, payload) {
           state.cartList.push(payload)
       }
   },
   actions: {
       addCart(context, payload) {
           let oldProduct = context.state.cartList.find(item => item.iid === payload.iid)
           if (oldProduct) {
               context.commit("addCount", oldProduct)
           } else {
               payload.count = 1
               context.commit('addToCart', payload)
           }
       }
   }

抽离出 mutations 和 actions 代码分别封装在 mutations.js 和 actions.js 中，把 mutation 里的方法修改为常量类型 。

13.2 vuex 的 getters 新用法 — mapGetters 辅助函数

mapGetters 辅助函数将 store 中的 getter 映射到局部计算属性，也就是 getters 中的方法可以直接在组件中当做 computed 的计算属性来用

1）getters

1
2
3
4
5
6
7
8
export default {
    cartLength(state) {
        return state.cartList.length;
    },
    cartList(state) {
        return state.cartList;
    }
}

2）在组件中导入 mapGetters 从 vuex

1
import { mapGetters } from "vuex";

3）getters 映射到 computed 中

1
2
3
4
5
6
7
8
9
10
11
computed: {
  // 两种语法
  // 语法1 数组语法
  ...mapGetters(["cartLength"]),
  
  // 语法2 对象语法，属性名可自定义
   ...mapGetters({
     length: "cartLength",
     list: "cartList",
   }),
},

4）使用自定义属性

小结

1）v-for 遍历如果后面跟的不是 Array 而是一个 Number,那么就会从 1 开始遍历到 n。

1
<span v-for="index in 10" >{{index}}</span> 1.2.3...10

2） 判断一个对象是否为空

1
2
3
4
5
6
7
const obj = {
	....
}

Object.keys(obj).lenght === 0 // 则说明这是一个空对象

<div v-if="Object.keys(goods).length !== 0">

3.展示数据时 可以通过 v-if 判断数据是否为空，为空就不展示

1
<img :src="goods.services[n-1].icon" v-if="goods.services[n-1].icon" alt />

4.动态绑定样式，打折描述背景颜色是由数据库的数据决定的，不同的 item 颜色不尽相同。

1
<span :style="{background:goods.discountcolor}">{{goods.discount}}</span>

5.在 vue cli3 如何用 less ，安装 less 和 less-loader

1
npm install less less-loader --save-dev

6.点击列表中的列表项，切换 active 属性

1）动态绑定 class

2) 监听点击事件，修改 currentIndex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="title-item" v-for="(item, index) in titles" :key="index"
    :class="{active:currentIndex === index}"
    @click="titleClick(index)">{{item}}</div>
</div>

data() {
    return {
        titles: ["商品", "参数", "评论", "推荐"],
        currentIndex: 0,
    };
},
methods: {
    titleClick(index) {
    	this.currentIndex = index;
    }}

css

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家