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 进行了重写。

官方文档很详细，不写了

  1 用better-scroll开发轮播插件
  2 <template>
  3     <div class="slider" ref="slider">
  4         <div class="slider-group" ref="sliderGroup">
  5             <slot></slot>
  6         </div>
  7         <div class="dots">
  8             <span class="dot" :class="{active:currentPageIndex===index}" v-for="(item,index) in dots"></span>
  9         </div>
 10     </div>
 11 </template>
 12 <script>
 13 import {addClass} from 'common/js/dom'
 14 import BScroll from 'better-scroll'
 15 export default{
 16     props: {
 17     loop: {
 18       type: Boolean,
 19       default: true
 20     },
 21     autoPlay: {
 22       type: Boolean,
 23       default: true
 24     },
 25     interval: {
 26       type: Number,
 27       default: 2000
 28     }
 29   },
 30     data(){
 31         return{
 32             dots:[],
 33             currentPageIndex: 0
 34         }
 35     },
 36     mounted(){
 37         setTimeout(() => {
 38       this._setSliderWidth()
 39       this._initDots()
 40       this._initSlider()
 41       if (this.autoPlay) {
 42         this._play()
 43       }
 44     }, 20)
 45 
 46     window.addEventListener('resize',()=>{
 47         if (!this.slider) {
 48         return
 49       }
 50       this._setSliderWidth(true)
 51       this.slider.refresh()
 52     })
 53     },
 54     activated() {
 55     if (this.autoPlay) {
 56       this._play()
 57     }
 58   },
 59   deactivated() {
 60     clearTimeout(this.timer)
 61   },
 62   beforeDestroy() {
 63     clearTimeout(this.timer)
 64   },
 65     methods:{
 66         _setSliderWidth(isResize){
 67             this.children=this.$refs.sliderGroup.children;
 68             let width=0;
 69             let sliderWidth=this.$refs.slider.clientWidth;
 70             for(let i=0;i<this.children.length;i++){
 71                 let child=this.children[i];
 72                 addClass(child,'slider-item');
 73                 child.style.width=sliderWidth+'px';
 74                 width+=sliderWidth;
 75             }
 76             if(this.loop && !isResize){
 77                 width+=2*sliderWidth
 78             }
 79             this.$refs.sliderGroup.style.width = width + 'px';
 80         },
 81         _initSlider(){
 82             this.slider = new BScroll(this.$refs.slider, {
 83         scrollX: true,
 84         scrollY: false,
 85         momentum: false,
 86         snap: true,
 87         snapLoop: this.loop,
 88         snapThreshold: 0.3,
 89         snapSpeed: 400
 90       });
 91 
 92         this.slider.on('scrollEnd',()=>{
 93             let pageIndex = this.slider.getCurrentPage().pageX;
 94             if (this.loop) {
 95           pageIndex -= 1
 96         }
 97         this.currentPageIndex = pageIndex;
 98         if (this.autoPlay) {
 99           this._play()
100         }
101         });
102         this.slider.on('beforeScrollStart', () => {
103         if (this.autoPlay) {
104           clearTimeout(this.timer)
105         }
106       })
107 
108         },
109         _initDots() {
110       this.dots = new Array(this.children.length)
111     },
112     _play() {
113         let pageIndex = this.currentPageIndex + 1
114         if (this.loop) {
115           pageIndex += 1
116         }
117         this.timer = setTimeout(() => {
118           this.slider.goToPage(pageIndex, 0, 400)
119         }, this.interval)
120       }
121     }
122 }
123 </script>
124 <style lang="stylus" scoped>
125   @import "~common/stylus/variable"
126     
127   .slider
128     min-height: 1px
129     .slider-group
130       position: relative
131       overflow: hidden
132       white-space: nowrap
133       .slider-item
134         float: left
135         box-sizing: border-box
136         overflow: hidden
137         text-align: center
138         a
139           display: block
140            100%
141           overflow: hidden
142           text-decoration: none
143         img
144           display: block
145            100%
146     .dots
147       position: absolute
148       right: 0
149       left: 0
150       bottom: 12px
151       text-align: center
152       font-size: 0
153       .dot
154         display: inline-block
155         margin: 0 4px
156          8px
157         height: 8px
158         border-radius: 50%
159         background: $color-text-l
160         &.active
161            20px
162           border-radius: 5px
163           background: $color-text-ll
164 </style>

 1 用better-scroll开发滚动条插件
 2 <template>
 3     <div ref="wrapper">
 4         <slot></slot>
 5     </div>
 6 </template>
 7 <script>
 8 import BScroll from 'better-scroll'
 9 export default{
10     props: {
11     probeType: {
12       type: Number,
13       default: 1
14     },
15     click: {
16       type: Boolean,
17       default: true
18     },
19     listenScroll: {
20       type: Boolean,
21       default: false
22     },
23     data: {
24       type: Array,
25       default: null
26     },
27     pullup: {
28       type: Boolean,
29       default: false
30     },
31     beforeScroll: {
32       type: Boolean,
33       default: false
34     },
35     refreshDelay: {
36       type: Number,
37       default: 20
38     }
39   },
40   mounted(){
41       setTimeout(() => {
42       this._initScroll()
43     }, 20)
44   },
45   methods:{
46       _initScroll(){
47           if (!this.$refs.wrapper) {
48         return
49       }
50       this.scroll=new BScroll(this.$refs.wrapper,{
51           probeType: this.probeType,
52         click: this.click
53       })
54       },
55       disable() {
56       this.scroll && this.scroll.disable()
57     },
58     enable() {
59       this.scroll && this.scroll.enable()
60     },
61     refresh() {
62       this.scroll && this.scroll.refresh()
63     },
64     scrollTo() {
65       this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
66     },
67     scrollToElement() {
68       this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
69     }
70   },
71   watch:{
72       data(){
73           setTimeout(() => {
74         this.refresh()
75       }, this.refreshDelay)
76       }
77   }
78 }
79 </script>
80 <style>
81     
82 </style>

图片懒加载vue-lazyload

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

使用：

main.js

import VueLazyload from 'vue-lazyload'

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

日常所遇，随手而记。