vue项目简书(二)

生南星

发布于 2019-07-22 14:35:03

1.3K0

发布于 2019-07-22 14:35:03

文章被收录于专栏：生南星生南星

网址: https://github.com/semlinker/reactjs-interview-questions

1. ES6的新方法实现数组去重

ES6里新添加了两个很好用的东西，set和Array.from。

a. set是一种新的数据结构，它可以接收一个数组或者是类数组对象，自动去重其中的重复项目。

注意: set返回的是一个对象，而不是一个数组。

b. 这回，就该轮到Array.from出场了，它的作用，就是可以把类数组对象、可迭代对象转化为数组。

注: 此方法IE不支持!

2. 项目中动态获取数据的轮播图在第二次以后的轮播都会出现白屏问题,经过百度, 修复了此bug.

Vue使用swiper动态加载数据，动态轮播数据显示白屏问题处理（保证在数据请求之后再渲染页面）

a. vue里swiper的安装使用

npm 安装:

在指定的目录下

  npm install vue-awesome-swiper --save

使用:

全局；在main.js中

import Vue from 'vue'
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'
    Vue.use(VueAwesomeSwiper, /* { default global options }

局部引用

import 'swiper/dist/css/swiper.css'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
      components: {
        swiper,
        swiperSlide
      }
    }

b. HTML

<div class="swiper-container">
       <div class="swiper-wrapper">
           <div class="swiper-slide">Slide 1</div>
           <div class="swiper-slide">Slide 2</div>
           <div class="swiper-slide">Slide 3</div>
       </div>
       <!-- 如果需要分页器 -->
       <div class="swiper-pagination"></div>
       <!-- 如果需要导航按钮 -->
       <div class="swiper-button-prev"></div>
       <div class="swiper-button-next"></div>
       <!-- 如果需要滚动条 -->
       <div class="swiper-scrollbar"></div>
</div>

c. 初始化swiper

因为dom渲染完成才能初始化Swiper，所以将初始化放入vue的生命周期钩子函数mounted中：

mounted () {
　　this.swiperInit()
}
swiperInit() {
   this.$nextTick(function() {
       var mySwiper = new Swiper('.swiper-container', {
           observer: true, //修改swiper自己或子元素时，自动初始化swiper
           observeParents: true, //修改swiper的父元素时，自动初始化swiper
           loop: true,
           initialSlide: 0,
           autoplay: {
              disableOnInteraction: false,
              delay: 10000
           },
           speed: 300,
           direction: 'horizontal',
           // 如果需要分页器
           pagination: {
               el: '.swiper-pagination',
           },
           onSlideChangeEnd: function(swiper){ 
                swiper.update() 
            },
      })
   })
},

d. 获取轮播数据后再次初始化swiper

Vue.axios.get('https://elm.cangdu.org/v2/index_entry').then((res)=>{
   this.isLoading = false;
   // console.log(res.data);
   //等待数据加载完毕之后再初始化轮播并处理数据
   if(!!res.data){
     //初始化swiper
      this.swiperInit();
      //处理数据
      this.pic=res.data.slice(0,8);
      this.pic1=res.data.slice(8,16);
    }
  }).catch((error)=>{
     console.log('请求错误!',error);
});

参考博客: https://www.cnblogs.com/hanhanours/p/10792284.html

https://blog.csdn.net/yuzhibo22/article/details/80684298

学到更多: