better-scroll 实现简单的轮播 无缝滚动~

2018/07/25 20:07
阅读数 82
代码如下:


<template> <div class="slide_box"> <div class="slide" ref="slider"> <div class="slide-group" ref='slideGroup'> <slot> </slot> </div> <div class="dots"> <span class="dot" :class="{dotActive: (currentPageIndex) === index }" v-for="(item, index) in dots">{{index+1}}</span> </div> </div> </div> </template> <script> import BScroll from 'better-scroll'; export default { name:"betterScroll", props: { loop: { type: Boolean, default: true, }, autoPlay: { type: Boolean, default: true, }, interval: { type: Number, default: 1000 } }, data() { return { dots:[], currentPageIndex:0 } }, mounted() { this.setSliderWidth(); //设置轮播图的宽度 setTimeout(()=>{ this._initDots(); this.init(); if(this.autoPlay) { this.play(); } },20) }, destroyed() { clearTimeout(this.timer); }, methods: { setSliderWidth() { this.children = this.$refs.slideGroup.children; let width = 0; let sliderWidth = this.$refs.slider.clientWidth; for(let i = 0; i < this.children.length; i ++){ this.children[i].style.width = window.screen.width + 'px'; width += sliderWidth; } if(this.loop){ width += 2*sliderWidth; } this.$refs.slideGroup.style.width = width + 'px';// 最长的盒子 }, init(){ let vm = this; // 实例化scroll this.scroll = new BScroll(this.$refs.slider, { scrollX: true, scrollY: false, momentum: false, //关闭或者打开惯性运动的执行 snap: { loop: this.loop, // 循环 threshold: 0.3, speed: 400 // 轮播间隔 } }) this.scroll.on('scrollEnd', () => { let pageIndex = this.scroll.getCurrentPage().pageX; this.currentPageIndex = pageIndex; if(vm.autoPlay) { vm.play(); } }) this.scroll.on('beforeScrollStart', () => { if(vm.autoPlay){ clearTimeout(vm.timer); } }) }, _initDots() { this.dots = new Array(this.children.length) }, play() { let vm = this; this.timer = setTimeout(() => { vm.scroll.next(); },vm.interval) } } } </script> <style > .slide{ width: 100%; overflow: hidden; height: 150px; position: relative; } .slide-group{ height: 150px; } .slider-item{ float: left; height: 150px; } .dots{ position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; } .dot, .dotActive{ background: yellow; display: inline-block; margin: 0 4px; height: 20px; width: 20px; border-radius: 50%; } .dotActive{ background: red; } </style>

  

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部