搭建CLI步奏过程不详细介绍了
主要利用Vue.component()注册全局组件,滑动效果使用了translateX
如下图
让后开始详细介绍如何实现自己的轮播组件
一.新建jv-swiper文件夹
1.1、然后在jv-swiper文件夹新建index.vue ，该vue其实为swiper的外层控制
<template>
<div class="jv-swiper" ref="swileng">
<slot></slot>
<div v-if="indicator==='true'" class="indicator-box">//此段代码为指示器，轮播的小点点
<div v-for="(i,index) in jv_siwdom" :key="index" :class="jv_siw_index==index?'indicator_color':''" class="indicator"> </div>
</div>
</div>
</template>
<script>
/* eslint-disable */
export default {
name: "JvSwiper",
porps: {},
data() {
return {
indicator: true,
jv_siwdom: 0,
jv_siw_index: 0,
};
},
created() {},
mounted() {
let jv_interval = 3000,//滑动间隔
jv_duration = 300,//运动时间
jv_indicator = true;//指示器，轮播的小点点
try {
jv_interval = this.$refs.swileng.attributes.interval.value;//使用过程中设置的属性参数
jv_duration = this.$refs.swileng.attributes.duration.value;
jv_indicator = this.$refs.swileng.attributes.indicator.value;
} catch (error) {
}
this.indicator = jv_indicator;//把用户设置的或者默认的运动直接存储一下
let siwdom = this.$refs.swileng.childNodes,//获取有用户设置了多少张轮播
slef=this,
cont = 0,
box_left = 0;
this.jv_siwdom=siwdom.length - 1; //给负责渲染层的变量赋值，让它生产多少张轮播
let seti = setInterval(() => {//执行
SwiRotste();
}, jv_interval);
function SwiRotste() {
cont += 1; //进来就累加一次
if (cont == siwdom.length - 1) { //如果等于最后一个
cont = 0;
}
slef.jv_siw_index=cont; //把当前的值赋值给jv_siw_index,告诉我们当前滑动到哪一张
box_left = 100 * cont;
for (let i = 0, s = siwdom.length - 1; i < s; i++) { //给每个div添加不同的translateX值及运动时间
siwdom[i].style.transform = `translateX(${-box_left}%)`;
siwdom[i].style.transition = `${jv_duration / 1000}s`;
}
}
}
};
</script>
<style>
.jv-swiper {
width: 100%;
height: auto;
background-color: slategrey;
display: -webkit-inline-box;
overflow: hidden;
position: relative;
}
.indicator-box{
display: flex;
position: absolute;
bottom: 12px;
right: 6px;
}
.indicator {
width: 6px;
height: 6px;
border-radius: 100%;
background-color: #333;
margin: 0 3px;
}
.indicator_color{
background-color: #fff;
}
</style>
1.2、然后在jv-swiper文件夹新建swiper-item.vue ，该vue其实为swiper的swiper-item
<template>
<div class="swiper-item">
<slot></slot>
</div>
</template>
<script>
export default {
name: "swiper-item",
porps: {}
};
</script>
<style>
.swiper-item {
width: 100%;
height: 100%;
z-index: 9999;
}
.swiper-item img {
width: 100%;
height: auto;
}
</style>
二、在jv-swiper同级新建jv-index.js用了统一注册组件
/* eslint-disable */
import JvSwiper from './jv-swiper'
import SwiperItem from './jv-swiper/swiper-item.vue'
const JvIndex={
install:function(Vue){
// Vue.component()是用来注册全局组件的
Vue.component("jv-swiper", JvSwiper);
Vue.component("swiper-item", SwiperItem);
}
}
export default JvIndex
三、在mian.js 注册一下
import JvIndex from './components/jv-index'
Vue.use(JvIndex)
四、开始使用啦~
<template>
<div class="hello">
<h1>{{ msg }}</h1>
//第一个轮播
<jv-swiper interval='5000' duration='400' indicator='true'>//设置自定义属性，这几个（ interval、duration、indicator）属性都需要放子啊标签上哦
<swiper-item v-for="(item, index) in img" v-bind:key="index">
<img :src="item" alt="">
</swiper-item>
</jv-swiper>
//第二个轮播
<jv-swiper interval='3000' duration='400' indicator='true'>
<swiper-item v-for="(item, index) in img" v-bind:key="index">
<img :src="item" alt="">
</swiper-item>
</jv-swiper>
</div>
</template>
<script>
/* eslint-disable */
export default {
name: "HelloWorld",
props: {
msg: String
},
data() {
return {
img: ['http://m.xuelejia.com/static/images/lunbo2.jpg','http://m.xuelejia.com/static/images/new-banner2.png','http://m.xuelejia.com/static/images/lunbo3.jpg']
};
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
好了大功告成，下面为效果图
总结：
主要利用Vue.component()注册全局组件
使用 this.$refs.swileng.attributes 获取用户设置的参数，不知道各位大佬有没有更好的方式，求介绍
使用this.$refs.swileng.childNodes获取用多少张轮播，不知道各位大佬有没有更好的方式，求介绍
滑动效果使用了translateX 使用 slot 实现用户在组件标签内插入html代码 个人感觉自己写的代码还是有点小乱，还需改进提升
