您的位置: 首页  >  文章  >  第二篇☾项目中遇到的问题☽

第二篇☾项目中遇到的问题☽

分类: 文章 • 2024-01-30 23:38:52

1.移动端300ms延迟

在移动端web中会遇到300ms点击延迟的问题，这个时候可以使用fastclick来解决这个问题。

main.js文件中

import fastClick from ‘fastclick’

使用fastcilck


if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);

2.scoped穿透

父组件不能直接修改子组件的样式，因为style标签有scoped属性，需要进行穿透

.icons >>> .swiper-container

如果项目使用less,需要同deep代替>>>

.wrapper /deep/.swiper-pagination-bullet-active{ background: #fff};

3.注意当加载图片过慢的时候导致的页面抖动问题

给图片预留位置

 .wrapper
    overflow:hidden
    width:100%
    height:0
    padding-bottom:31.25%

百分比是高宽比

4.vue-awersome-swipper数据加载后直接显示最后一页问题

使用axios获取数据传递给轮播组件以后直接显示了最后一页，此时可以使用v-if通过判断数组长度返回的是true还是false
第二篇☾项目中遇到的问题☽

5. Bscroll使用方法：

    1. npm下载better-scroll：npm install better-scroll --save;
    2. 引入better-scroll：import Bscroll from "better-scroll";
    3. 定义标签dom:  < div ref="div"></div>
    4. 实例化bscroll: this.scroll=new Bscroll(this.$refs.div)即可;

注意：Bscroll提供滚动到指定DOM位置的API，this.scroll.scrollToElement(dom，300);

6.一像素边距

引入border.css，全局引入

main.js中

import ‘styls/border.css’

7.函数节流

使用拖动事件的时候，为了在连续拖动的时候不调用函数，使用定时器去延时，等拖动完毕再调用，提高性能。

 updated() {
    this.startY = this.$refs['A'][0].offsetTop
  }
 methods: {
    handleLetterClick(e) {
      this.$emit("change", e.target.innerText);
    },
    handleTouchStart() {
      this.touchStatus = true;
    },
    handleTouchMove(e) {
      if (this.touchStatus) {
        if(this.timer){
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(()=>{
          const touchY = e.touches[0].clientY - 79
          const index = Math.floor((touchY - this.startY)/20)
          if(index>=0 && index<this.letters.length){
            this.$emit('change',this.letters[index])
          }
        },16)
      }
    },
    handleTouchEnd() {
      this.touchStatus = false;
    }
  }

8.keep-alive

使用keep-alive可以进行缓存，这样就不会每次进入相同的页面都会进行数据请求了，能提高用户体验、在使用keep-alive以后会多两个生命周期函数:activated以及deactivated，我们可以在这里进行一些判断操作，来决定是否需要缓存，是否需要执行数据获取。此外，如果我们是给整个路由router-view组件进行了keep-alive，并且在这里执行了一些exinclude设置

<keep-alive exclude="Detail">
   <router-view/>
 </keep-alive>

exclude参数是在这个组件内，keep-alive不起作用
*因为使用了keep-alive缓存，有些页面需要重新获取数据的，用新增的生命周期activated：

  mounted(){
    this.lastCity = this.city
    this.getHomeInfo()
  },
  activated() {
    var that = this
    var timer = setTimeout(function(){
      if(this.lastCity !== this.city){
        this.lastCity = this.city
        that.getHomeInfo()
      }
    },3000) 
  },
  getHomeInfo(){
     axios.get('/api/index.json?city=' + this.city)  
       .then(res=>{
           this.getHomeInfoSucc(res)
           console.log(res)
         }
       )
  }

跳转页面的时候，解绑事件：

 activated() {
      window.addEventListener('scroll',this.handleScroll)
  },
  deactivated() {
      window.removeEventListener('scroll',this.handleScroll)
  },

9.监听滚动行为

如果我们的某个页面是滚动的，切设置了keep-alive，那么我们进入其他页面返回的时候如果读取了缓存，那么这个缓存是包括滚动行为的，则原来页面滚动到什么位置现在也滚动到什么位置如果我们不希望出现这种情况，可以在路由中设置滚动行为

router里面的index.js

export default new Router({
  routes: [{
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/city',
    name: 'City',
    component: City
  },{
    path: '/detail/:id',
    name: 'Detail',
    component: Detail
  }],
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

10.递归组件

第二篇☾项目中遇到的问题☽

11.swipperDOM结构变化导致的滚动问题

如果我们插入swipper中的DOM有所变化，那么滚动效果就会变得非常的差，这个时候我们可以设置他的swipperOptions里面的observeParents以及observer

data () {
   return {
     swiperOption: {
       pagination: '.swiper-pagination',
       paginationType: 'fraction',
       observeParents: true,
       observer: true
     }
   }
 },

12.全局事件

如果把事件绑定到window上面比如scroll事件，那么在推出这个页面的时候一定要进行解绑，不然在其他的页面也会受到这个事件的影响，造成bug

 mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  }

相关推荐