前言
轮播图可以说是在开发中必不可少的组件。接下来这篇文章就基于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