1.0.2 • Published 5 years ago
hcg-swipe v1.0.2
HSwipe
安装方式：
npm install hcg-swipe --save
yarn add hcg-swipe --save使用方法：
vue-cli脚手架工具中
<template>
<div class="h-swipe-container" ref="swipe">
<ul class="h-swipe-wrapper">
<li class="h-swipe-slide" v-for="item in swipeList" :key="item">
{{item}}
</li>
</ul>
<div class="h-swipe-pagination"></div>
</div>
</template>
<script>
import HSwipe from 'hcg-swipe';
export default {
name: "Swipe",
data() {
return {
swipeList: [1,2,3,4,5]
}
},
mounted() {
this.swipe = new HSwipe({
el: this.$refs['swipe'],
pagination: true
});
},
updated() {
this.$nextTick(() => {
this.swipe.refresh();
});
},
beforeDestroy() {
this.swipe = this.swipe.off();
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
list-style:none;
}
.h-swipe-slide {
height: 350px;
background: #eee;
text-align: center;
line-height: 350px;
font-size: 50px;
border: 1px solid #fff;
box-sizing: border-box;
}
</style>在html文件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style:none;
}
.h-swipe-slide {
height: 350px;
background: #eee;
text-align: center;
line-height: 350px;
font-size: 50px;
border: 1px solid #fff;
box-sizing: border-box;
}
</style>
<script src="hcg-swipe/HSwipe.min.js"></script>
</head>
<body>
<div class="h-swipe-container">
<ul class="h-swipe-wrapper">
<li class="h-swipe-slide">1</li>
<li class="h-swipe-slide">2</li>
<li class="h-swipe-slide">3</li>
<li class="h-swipe-slide">4</li>
<li class="h-swipe-slide">5</li>
</ul>
<div class="h-swipe-pagination"></div>
</div>
</body>
<script>
let swipe = new HSwipe({
el: '.h-swipe-container',
pagination: true,
transitionEnd(index) {
console.log(index)
}
});
</script>
</html>配置参数
/**
* @param {HTMLElement|String} option.el 轮播图外层容器，默认为 h-swipe-container
* @param {HTMLElement|String} option.wrapper 自定义轮播图wrapper容器选择器，默认为 h-swipe-wrapper
* @param {HTMLElement|String} option.slide 自定义轮播图slide容器选择器，默认为 h-swipe-slide
* @param {Number} option.activeIndex 自定义轮播图初始显示的图像，默认为 0
* @param {Number} option.duration 自定义动画消耗时间，默认800毫秒
* @param {Number} option.interval 自定义每帧停留时间，默认2000毫秒
* @param {Object|Boolean} option.pagination 选择配置分页器，传入true则使用默认选项
* @param {String} option.pagination.el 分页器选择器，默认el为 .h-swipe-pagination
* @param {String} option.pagination.tagName 分页器生成的标签，默认生成span标签
* @param {String} option.pagination.pageName 分页器的使用类名，默认使用 h-swipe-page-btn
* @param {String} option.pagination.activeClass 分页器激活使用的类名，默认激活使用active类名
* @param {Function} option.transitionEnd 每次动画执行完成之后的回调函数，第一个参数为当前激活的索引
* */可以使用的方法：
swipe.refresh(); // 实例上的方法，刷新结构,并重新开始轮播
swipe.off(); // 实例上的方法，关闭swipe
swipe = swipe.off(); // 彻底清除swipe实例