基于better-scroll封装slider组件

前言

轮播图可以说是在开发中必不可少的组件。接下来这篇文章就基于better-scroll封装一个简单的slider。

better-scroll简介

better-scroll可以说是在Vue开发移动端中最好用的滚动视图的组件，基本上可以解决移动端各种滚动场景需求，核心是借鉴了iscroll的实现，而且API设计基本兼容iscroll.如果您想详细的了解，可以点击查看better-scroll文档。

Slider的简单封装

template代码

<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>

在template文件中，我们首先用了一个最外层的div 来包裹slider的内容区域(group)和索引区域(dots).然后我们使用了vue-slot插槽，来扩展内容区域,以达到简单封装的目的。

CSS代码

<style scoped lang="stylus" rel="stylesheet/stylus">
  @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