vue2.0插件

1.better-scroll

参考网址：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/

better-scroll 是什么

firstClick和better-scroll冲突的时候将needsclick绑定在div1，即实际点击的元素上。

better-scroll 是一款重点解决移动端（未来可能会考虑 PC 端）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 46kb，压缩后是 26kb，gzip 后仅有 7kb，是一款非常轻量的 JS lib。

学习使用 better-scroll 最好的方式是看它的 demo 代码，我们把代码都放在了 example 目录。由于目前最适合移动端开发的前端 mvvm 框架是 Vue，并且 better-scroll 可以很好的和 Vue 配合使用的，所以 demo 我都用 Vue 进行了重写。

官方文档很详细，不写了

用better-scroll开发轮播插件
<template>
    <div class="slider" ref="slider">
        <div class="slider-group" ref="sliderGroup">
            <slot></slot>
        </div>
        <div class="dots">
            <span class="dot" :class="{active:currentPageIndex===index}" v-for="(item,index) in dots"></span>
        </div>
    </div>
</template>
<script>
import {addClass} from 'common/js/dom'
import BScroll from 'better-scroll'
export default{
    props: {
    loop: {
      type: Boolean,
      default: true
    },
    autoPlay: {
      type: Boolean,
      default: true
    },
    interval: {
      type: Number,
      default: 2000
    }
  },
    data(){
        return{
            dots:[],
            currentPageIndex: 0
        }
    },
    mounted(){
        setTimeout(() => {
      this._setSliderWidth()
      this._initDots()
      this._initSlider()
      if (this.autoPlay) {
        this._play()
      }
    }, 20)

    window.addEventListener('resize',()=>{
        if (!this.slider) {
        return
      }
      this._setSliderWidth(true)
      this.slider.refresh()
    })
    },
    activated() {
    if (this.autoPlay) {
      this._play()
    }
  },
  deactivated() {
    clearTimeout(this.timer)
  },
  beforeDestroy() {
    clearTimeout(this.timer)
  },
    methods:{
        _setSliderWidth(isResize){
            this.children=this.$refs.sliderGroup.children;
            let width=0;
            let sliderWidth=this.$refs.slider.clientWidth;
            for(let i=0;i<this.children.length;i++){
                let child=this.children[i];
                addClass(child,'slider-item');
                child.style.width=sliderWidth+'px';
                width+=sliderWidth;
            }
            if(this.loop && !isResize){
                width+=2*sliderWidth
            }
            this.$refs.sliderGroup.style.width = width + 'px';
        },
        _initSlider(){
            this.slider = new BScroll(this.$refs.slider, {
        scrollX: true,
        scrollY: false,
        momentum: false,
        snap: true,
        snapLoop: this.loop,
        snapThreshold: 0.3,
        snapSpeed: 400
      });

        this.slider.on('scrollEnd',()=>{
            let pageIndex = this.slider.getCurrentPage().pageX;
            if (this.loop) {
          pageIndex -= 1
        }
        this.currentPageIndex = pageIndex;
        if (this.autoPlay) {
          this._play()
        }
        });
        this.slider.on('beforeScrollStart', () => {
        if (this.autoPlay) {
          clearTimeout(this.timer)
        }
      })

        },
        _initDots() {
      this.dots = new Array(this.children.length)
    },
    _play() {
        let pageIndex = this.currentPageIndex + 1
        if (this.loop) {
          pageIndex += 1
        }
        this.timer = setTimeout(() => {
          this.slider.goToPage(pageIndex, 0, 400)
        }, this.interval)
      }
    }
}
</script>
<style lang="stylus" scoped>
  @import "~common/stylus/variable"
    
  .slider
    min-height: 1px
    .slider-group
      position: relative
      overflow: hidden
      white-space: nowrap
      .slider-item
        float: left
        box-sizing: border-box
        overflow: hidden
        text-align: center
        a
          display: block
           100%
          overflow: hidden
          text-decoration: none
        img
          display: block
           100%
    .dots
      position: absolute
      right: 0
      left: 0
      bottom: 12px
      text-align: center
      font-size: 0
      .dot
        display: inline-block
        margin: 0 4px
         8px
        height: 8px
        border-radius: 50%
        background: $color-text-l
        &.active
           20px
          border-radius: 5px
          background: $color-text-ll
</style>

用better-scroll开发滚动条插件
<template>
    <div ref="wrapper">
        <slot></slot>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
export default{
    props: {
    probeType: {
      type: Number,
      default: 1
    },
    click: {
      type: Boolean,
      default: true
    },
    listenScroll: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: null
    },
    pullup: {
      type: Boolean,
      default: false
    },
    beforeScroll: {
      type: Boolean,
      default: false
    },
    refreshDelay: {
      type: Number,
      default: 20
    }
  },
  mounted(){
      setTimeout(() => {
      this._initScroll()
    }, 20)
  },
  methods:{
      _initScroll(){
          if (!this.$refs.wrapper) {
        return
      }
      this.scroll=new BScroll(this.$refs.wrapper,{
          probeType: this.probeType,
        click: this.click
      })
      },
      disable() {
      this.scroll && this.scroll.disable()
    },
    enable() {
      this.scroll && this.scroll.enable()
    },
    refresh() {
      this.scroll && this.scroll.refresh()
    },
    scrollTo() {
      this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
    },
    scrollToElement() {
      this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
    }
  },
  watch:{
      data(){
          setTimeout(() => {
        this.refresh()
      }, this.refreshDelay)
      }
  }
}
</script>
<style>
    
</style>

图片懒加载vue-lazyload

网址：https://github.com/hilongjw/vue-lazyload

使用：

main.js

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
　　//可以加入条件
})