vue利用better-scroll实现轮播图与页面滚动详解

前言

better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图、picker 等等…所以本文主要给大家介绍了关于vue用better-scroll实现轮播图与页面滚动的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

1.安装better-scroll

在根目录中package.json的dependencies中添加：

"better-scroll": "^0.1.15"

然后

npm i

2.封装代码

将better-scroll封装成两个基础组件slider和scroll放于src/base文件夹中。

slider.vue 代码

<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{
 data() {
  return {
  dots:[],
  currentPageIndex: 0
  }
 },
 props:{
  loop:{
  type:Boolean,
  default:true
  },
  autoPlay:{
  type:Boolean,
  default:true
  },
  interval:{
  type: Number,
  default:4000
  }
 },
 mounted() {
  this._setSliderWidth()
  setTimeout(() => {
  // 在初始化slider前初始化dot
  this._initDots()
  this._initSlider()
  if (this.autoPlay) {
   this._play()
  }
  }, 20)
  // 监听窗口大小改变时间
  window.addEventListener('resize', () => {
  if (!this.slider) {
   return
  }
  this._setSliderWidth(true)
  this.slider.refresh()
  })
 },
 methods:{
  _setSliderWidth(isResize) {
  this.children = this.$refs.sliderGroup.children
  let width = 0
  // slider 可见宽度
  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,								 
 1/4    1 2 3 4 下一页 尾页