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
           width: 100%
           overflow: hidden
           text-decoration: none
         img
           display: block
           width: 100%
     .dots
       position: absolute
       right: 0
       left: 0
       bottom: 12px
       text-align: center
       font-size: 0
       .dot
         display: inline-block
         margin: 0 4px
         width: 8px
         height: 8px
         border-radius: 50%
         background: $color-text-l
         &.active
           width: 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, {
　　//可以加入条件
})