Vue部分插件的使用

swiper

vue-awesome-swiper
https://github.com/surmon-china/vue-awesome-swiper

npm install --save vue-awesome-swiper

**常见问题1：滚动条划不动（划一下弹回去，非静止）
原因，页面内容还没有加载出来，滚动条的高度设置为了未加载资源时容器的高度，所以导致slide的高度不够滑动。解决办法就是，资源加载完之后更新滚动条。
举例：recommends.vue是有需要加载的内容。 利用swiper给该组件做了一个滚动条。

• bash src/mall/home/recommends.vue

此文件下，recommends加载完之后，抛出loaded时间，并带出数据this.recommends

this.$emit('loaded', this.recommends);

• bash src/mall/home/index.vue

然后在调用recommend组件的页面下。

给滚动条传一个数据，默认是空数组，当@loaded捕获到事件，执行事件，将this.recommends更新，即滚动条的data更新。再利用watch监听这个数据变化，发生变化的时候，更新滚动条。

<me-scroll :data="recommends">
      <home-slider></home-slider>
      <home-nav></home-nav>
<!--      接收事件，当recommends加载完之后，更新滚动条-->
      <home-recommend @loaded="getRecommend"></home-recommend>
</me-scroll>

home-recommend是home的子组件，可以看作是子组件上接收到事件，然后就可以向父组件传值。（子组件向父组件传值）

data() {
  return {
    recommends: [],
  }
},
methods: {
    updateScroll() {

    },
// @loaded捕获事件的时候，顺便获取到了参数
  getRecommend(recommends) {
      this.recommends = recommends;
  }

• bash src\base\scroll\index.vue

最后在滑动条组件里更新滑动条

props:{
       data: {
      type: [Array, Object],
    }
},

watch: {
  data(newValue,oldValue){
    // watch默认会传入old和new value，用不到，可以不接收。
	// watch用法可以参照另一篇
    this.updata();
  }
},
methods: {
  updata(){
	// 官方api下有swiper.update() 更新滚动条
	// 但是这个swiper并非我们组件里的swiper，而是 new Swiper（）实例化之后的对象才具有这个方法。
    console.log(this.$refs.swiper);
    // this.$refs.swiper  获取到的VueComponent,是一个组件实例，里面包含一个swiperInstance，这个就是一个Swiper实例
    this.$refs.swiper && this.$refs.swiper.swiperInstance.update();
  },
}

其中，ref是是设置在swiper组件上

<swiper :options="swiperOptions" ref="swiper"></swiper>

lazyload

npm install --save vue-lazyload

main.js文件中

// 设置后全局可以使用lazyLoad
import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload, {
  preLoad: 1,   // 其实是个小数，1表示页面内容完全暴露的时候加载，一点几表示还没划到图片位置就开始加载,零点几表示滑到图片位置，过一会儿才开始加载
  error: require('assets/img/error.png'),
  loading: require('assets/img/loading.gif'),
  attempt: 1,
})

使用方法:

<img class="recommend-img" :src="item.baseinfo.picUrlNew">

替换成

<img class="recommend-img" v-lazy="item.baseinfo.picUrlNew">

axios

npm install --save axios

获取数据的方式。详情可以查看
【vue学习】axios 各种获取数据方式对比

fastclick

npm install –-save babel-polyfill fastclick

移动端点击之后会有300ms的延迟，fastclick可以解决这个问题

babel-polyfill

npm install --save-dev babel-polyfill

原生的babel只会将ES6的语法（如箭头函数）转化成低版本的语法，但是对于ES6的API只会原封不动的保留，同样无法在低版本设备适应。 babel-polyfill就是可以在全局范围内添加API。