Zephon Blog
0%

Vue商城项目的一些问题

发表于 更新于 分类于
本文字数： 1.5k 阅读时长 ≈ 1 分钟

Vue中常见问题解决

项目地址

https://github.com/Zephon-H/vue-store ## 使用Better-Scroll时由于计算高度时，图片未加载出来所以高度计算错误，滚动会有问题，如何解决？

  • 监听每一张图片是否加载完成，每张图片加载完成后就执行一次scroll的refresh()的方法

如何监听图片加载完成？

  • 原生的JS方式img.onload=function(){}
  • Vue中监听：@load='方法'

如何将图片所在vue中的监听到的图片加载完成事件传给Home.vue中

  • 因为涉及到了非父子组件的通信，所以这里可以采用vuex或事件总线的方法

  • 事件总线的方法步骤

    1. 在main.js中Vue.prototype.$bus = new Vue()
    2. 在图片组件中给图片加上@*load*="imageLoad"并在imageLoad()方法中*this*.$bus.$emit('itemImageLoad')
    3. 在Home组件中this.$bus.$on('itemImageLoad',()=>{o})

    对于refresh频繁的问题，如果处理？

  • 进行防抖

  • 防抖函数起作用的过程：

    • 如果我们直接执行refresh，那么refresh会被执行n次
    • 可以将refresh函数传入到debounce函数中，生成一个新的函数
    • 之后在调用非常频繁的时候，就调用新生成的函数
    • 而新生成的函数，并不会非常频繁的调用，如果下一次执行来的非常快，那么会将上一次的取消掉
    1
    2
    3
    4
    5
    6
    7
    8
    9
    debounce (func, delay) {
          let timer = null
          return function (...args) {
            if (timer) clearTimeout(timer)
            timer = setTimeout(() => {
              func.apply(this, args)
            }, delay)
          }
        }

tab选项卡的吸顶效果

  • 获取offsetTop
    • 必须知道滚动到多少时，开始有吸顶效果，这个时候，就需要获取tab的offsetTop
    • 但是如果直接在mounted中获取offsetTop，那么值不正确，因为可能有图片未加载
    • 监听滚动，动态的改变tab的样式，动态改变tab的样式时会出现两个问题

如何获取正确的offsetTop?

  • 由于swiper中图片较大，当swiper中图片加载完后，可视为所有图片加载完，所有监听swiper中img加载完成
  • 加载完成后，发出事件，在home中获取正确的值
  • 为了swiper不多次发出事件，可以设置一个变量isLoad进行状态记录

当动态改变tab的样式时，下面的商品内容会突然上移，且tab虽然设置了fixed，但也会随着better scroll一起滚出去，如何解决？

  • 通过其它方法实现相同效果
  • 在最上面，多复制一个tab组件，用它实现停留效果
  • 当用户滚动一定的位置时，复制的tab显示，未到该位置，则隐藏

加入详情页后，点击所有商品进入的详情页内容是同一个?

  • 由于前面使用了keep-alive，所有离开详情页后，结果只是将detail转为deactive，再进入不会执行created中的更新id、加载数据的方法，所以需要在keep-alive中使用exclude="Detail"排除详情页

如何将时间戳转成格式化字符串？

  • 将时间戳(单位是秒)转成Date对象const date = new Date(t*1000)
  • 将date进行格式化，转成对应的字符串date.getYear()+date.getMonth()+1... 部分语言中可以使用fmt.format(date,'yyyy-MM-dd hh:mm:ss')