工作中封装的一些移动端轮播组件 用的是 vue写的 react后期有时间的话会补上

原理什么的就不说了 这些都比较简单 直接上代码 来点干货 下图是我的文件目录

components 是子组件 page放的父组件 一共封装了四种 最后引入home里

第一种 原生js实现
page文件里的 Lunbo组件 index.vue

<template>
<div class='Lunbo'>
<div v-if="swiperList.length" class="slider-wrapper" ref="sliderWrapper">
<!-- 第一种方案(原生) -->
<h3>第一种方案(原生)</h3>
<protogenesis-swiper ref="swiper">
<protogenesis-swiper-item v-for="item in swiperList" :key="item.id">
<a :href="item.linkUrl">
<img :src="item.imgUrl" alt="">
</a>
</protogenesis-swiper-item>
</protogenesis-swiper>
</div>
</div>
</template>

<script>
// 第一种方案(原生)
import  ProtogenesisSwiper from '../../components/ProtogenesisSwiper'
import ProtogenesisSwiperItem from '../../components/ProtogenesisSwiperItem'
export default {
name: "Lunbo",
data() {
return {
swiperList: [
{
imgUrl: require("../../assets/img/lun.1.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "1"
},
{
imgUrl: require("../../assets/img/lun.2.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "2"
},
{
imgUrl: require("../../assets/img/lun.3.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "3"
},
{
imgUrl: require("../../assets/img/lun.1.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "4"
},
{
imgUrl: require("../../assets/img/lun.5.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "5"
},
{
imgUrl: require("../../assets/img/lun.2.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "6"
}
]
};
},
components: {
ProtogenesisSwiper,
ProtogenesisSwiperItem

},
methods: {
// 启动轮播图(原生实现)
startTimer() {
this.$refs.swiper &&
this.$refs.swiper.startTimer &&
this.$refs.swiper.startTimer();
},
// 停止轮播图(原生实现)
stopTimer() {
this.$refs.swiper &&
this.$refs.swiper.stopTimer &&
this.$refs.swiper.stopTimer();
}
},
destroyed() {
// 停止轮播图(原生实现)
this.stopTimer();
}
};
</script>

<style lang="scss" scoped>

</style>

components 里面的ProtogenesisSwiper 文件夹 index.vue

<template>
<div id="hy-swiper">
<div class="swiper" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
<slot></slot>
</div>
<slot name="indicator"></slot>
<div class="indicator">
<slot name="indicator" v-if="showIndicator && slideCount>1">
<div
v-for="(item, index) in slideCount"
class="indi-item"
:class="{active: index === currentIndex-1}"
:key="index"
></div>
</slot>
</div>
</div>
</template>

<script>
export default {
name: "ProtogenesisSwiper",
props: {
// interval: 每次定时器的间隔时间
interval: {
type: Number,
// default: 默认的内容
default: 3000
},
// animDuration: 每一张图片切换的时间
animDuration: {
type: Number,
default: 300
},
// moveRation: 手指移动对应的距离切换到下一张
moveRatio: {
type: Number,
default: 0.25
},
// showIndicator: 是否开启指示器
showIndicator: {
type: Boolean,
default: true
}
},
data() {
return {
slideCount: 0, // 元素个数
totalWidth: 0, // swiper的宽度
swiperStyle: {}, // swiper样式
currentIndex: 1, // 当前的index
scrolling: false // 是否正在滚动
};
},
mounted() {
// 1.操作DOM, 在前后添加 Slider
setTimeout(() => {
this.handleDom();

// 2.开启定时器
this.startTimer();
}, 100);
},
methods: {
/**
* 开启定时器
*/
startTimer() {
this.playTimer = window.setInterval(() => {
this.currentIndex++;
this.scrollContent(-this.currentIndex * this.totalWidth);
}, this.interval);
},
/**
* 停止定时器
*/
stopTimer() {
window.clearInterval(this.playTimer);
},
/**
* 滚动到正确位置
*/
scrollContent(currentPosition) {
// 1.设置滚动开始
this.scrolling = true;

// 2.开始滚动动画
this.swiperStyle.transition = "transform" + this.aninDuration + "ms";
this.setTransform(currentPosition);

// 3.判断滚动的位置
this.checkPosition();

// 4.滚动完成
this.scrolling = false;
},

/**
* 校验正确的位置
*/
checkPosition() {
window.setTimeout(() => {
// 1.校验正确的位置
this.swiperStyle.transition = "0ms";
// 判断临界点
if (this.currentIndex >= this.slideCount + 1) {
this.currentIndex = 1;
this.setTransform(-this.currentIndex * this.totalWidth);
// 判断当前的索引值是否小于或者等于 0
} else if (this.currentIndex <= 0) {
this.currentIndex = this.slideCount;
this.setTransform(-this.currentIndex * this.totalWidth);
}

// 2.结束移动后的回调
this.$emit("transitionEnd", this.currentIndex - 1);
}, this.animDuration);
},

/**
* 设置滚动的位置
*/
setTransform: function(position) {
this.swiperStyle.transform = `translate3d(${position}px, 0, 0)`;
this.swiperStyle[
"-webkit-transform"
] = `translate3d(${position}px), 0, 0`;
this.swiperStyle["-ms-transform"] = `translate3d(${position}px), 0, 0`;
},

/**
* 操作DOM, 在DOM前后添加Slide
*/
handleDom: function() {
// 1.获取要操作的元素
let swiperEl = document.querySelector(".swiper");
let slidesEls = swiperEl.getElementsByClassName("slide");

// 2.保存个数
this.slideCount = slidesEls.length;

// 3.如果大于1个, 那么在前后分别添加一个slide
if (this.slideCount > 1) {
let cloneFirst = slidesEls[0].cloneNode(true);
let cloneLast = slidesEls[this.slideCount - 1].cloneNode(true);
// 添加标签插入到相对应的位置
swiperEl.insertBefore(cloneLast, slidesEls[0]);
swiperEl.appendChild(cloneFirst);
// 设置 totalWidth 来接收 swiperEl的可以区域的宽度
this.totalWidth = swiperEl.offsetWidth;
// 设置 swiperStyle 来接收 swiperEl 的属性
this.swiperStyle = swiperEl.style;
}

// 4.让swiper元素, 显示第一个(目前是显示前面添加的最后一个元素)
this.setTransform(-this.totalWidth);
},

/**
* 拖动事件的处理
*/
touchStart: function(e) {
// 1.如果正在滚动, 不可以拖动
if (this.scrolling) return;

// 2.停止定时器
this.stopTimer();

// 3.保存开始滚动的位置
this.startX = e.touches[0].pageX;
},

/**
* 手指移动事件
*/
touchMove: function(e) {
// 1.计算出用户拖动的距离
this.currentX = e.touches[0].pageX;
this.distance = this.currentX - this.startX;
let currentPosition = -this.currentIndex * this.totalWidth;
let moveDistance = this.distance + currentPosition;

// 2.设置当前的位置
this.setTransform(moveDistance);
},

/**
* 手指抬起事件
*/
touchEnd: function(e) {
// 1.获取移动的距离
let currentMove = Math.abs(this.distance);

// 2.判断最终的距离
if (this.distance === 0) {
return;
} else if (
this.distance > 0 &&
currentMove > this.totalWidth * this.moveRatio
) {
// 右边移动超过0.5
this.currentIndex--;
} else if (
this.distance < 0 &&
currentMove > this.totalWidth * this.moveRatio
) {
// 向左移动超过0.5
this.currentIndex++;
}

// 3.移动到正确的位置
this.scrollContent(-this.currentIndex * this.totalWidth);

// 4.移动完成后重新开启定时器
this.startTimer();
},

/**
* 控制上一个, 下一个
*/
previous: function() {
this.changeItem(-1);
},

next: function() {
this.changeItem(1);
},

changeItem: function(num) {
// 1.移除定时器
this.stopTimer();

// 2.修改index和位置
this.currentIndex += num;
this.scrollContent(-this.currentIndex * this.totalWidth);

// 3.添加定时器
this.startTimer();
}
}
};
</script>

<style lang="scss" scoped>
#hy-swiper{
overflow: hidden;
position: relative;
}

.swiper{
display: flex;
}

.indicator{
display: flex;
justify-content: center;
position: absolute;
width: 100%;
bottom: 0.2rem;
}
.indi-item{
box-sizing: border-box;
width:0.15rem;
height:0.15rem;
border-radius: 50%;
line-height:0.2rem；
text-align：center;
font-size: 12px;
margin-right:0.08rem;
border: 1px solid rgba(0,0,0,.05);
background: rgba(255,255,255,.4);
}

.indi-item.active{
background: #FFF;
}

</style>

components 里面的ProtogenesisSwiperItem 文件夹 index.vue

<template>
<div class="slide">
<slot></slot>
</div>
</template>

<script>
export default {
name: "Slide"
};
</script>

<style lang="scss" scoped>
.slide{
width: 100%;
flex-shrink: 0;
}

.slide img{
width: 100%;
}

</style>

上张图片吧 没做效果视频

**第二种方式 原生zoom缩放 **
page 文件里 Lunbo2

<template>
<div>
<Lunbo :list="this.list" height="3.4rem" :options="this.options"  effect="zoom"></Lunbo>
</div>
</template>
<script>
import Lunbo from '../../components/carousel'
export default {
name: "lunbo",
data() {
return {
list: [
{
img: require("../../assets/img/lun.1.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "1"
},
{
img: require("../../assets/img/lun.2.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "2"
},
{
img: require("../../assets/img/lun.3.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "3"
},
{
img: require("../../assets/img/lun.1.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "4"
},
{
img: require("../../assets/img/lun.5.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "5"
},
{
img: require("../../assets/img/lun.2.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "6"
}
],
options:{
showDots: true, // 是否显示分页器
interval: 3000, // 轮播间隔时间，默认3s
autoplay: true, // 是否自动播放
loop: true // 是否循环轮播
}
};
},
components: {
Lunbo

},
methods: {
},

};
</script>

<style lang="scss" scoped>

</style>

components 里面的carousel index.vue

<template>
<div class="swiper-component" @touchstart="onTouchStart" @touchend="onTouchEnd" :style="{height:height}">
<H3>第二种方式 原生zoom缩放</H3>
<ul :style="[ulStyle, swiperStyle]">
<li v-for="(item, ind) in list" :key="ind" :style="{width: itemWidth + 'px'}" :class="[index===ind?'active':'', effect]" @click="handleClick(item)">
<a :href="item.linkUrl">
<img :src="item.img">
</a>
</li>
</ul>
<div v-show="options.showDots" class="swiper-dots">
<div v-for="(item, ind) in list" :key="ind" class="dots-item" :class="{active:index===ind}"></div>
</div>
</div>
</template>
<script>
export default {
name:'Lunbo2',
data() {
return {
ulStyle: { width: "7.5rem", paddingLeft: "0.2rem" }, // 轮播图容器宽度
itemWidth: 750, // 单个轮播图容器的宽度，默认屏幕宽度,
swiperStyle: {}, // 控制轮播的样式
index: 0, // 当前显示的轮播图索引，默认第一张
touchStart: {}, // 触摸开始点位
touchEnd: {}, // 触摸结束点位
intervalTime: "" // 循环轮播定时器
};
},
props: {
height: {
type: String,
default: "3rem"
},
options: {
type: Object,
default: {
showDots: false, // 是否显示分页器
interval: 3000, // 轮播间隔时间，默认3s
autoplay: true, // 是否自动播放
loop: true // 是否循环轮播
}
},
list: {
type: Array,
default: []
},
effect: {
type: String,
default: "normal" // 轮播图的样式类型，默认正常类型 normal，可选：zoom（缩放）
}
},
mounted() {
this.calcWidth();
this.handleLoopMove();
},
methods: {
/**
* 初始化时的一些宽度计算操作
*/
calcWidth() {
// 页面更新后执行宽度计算
this.$nextTick(function() {
if (this.effect === "normal") {
// 如果是正常模式，一张图的宽度为屏幕宽度
this.itemWidth = document.body.clientWidth; // 获取屏幕的宽度
} else if (this.effect === "zoom") {
// 如果是缩放模式，控制轮播图显示的宽度，两边流出空隙
this.itemWidth = document.body.clientWidth - 40; // 获取屏幕的宽度
}
this.handleType();
var length = this.list.length; // 获取列表的个数
this.ulStyle.width = parseInt((this.itemWidth + 40) * length) + "px"; // 容器总宽度
});
},
/**
* 轮播图点击事件
*/
handleClick(val) {
// 触发外部事件，将点击的轮播图详情数据返回
this.$emit("onClick", val);
},
/**
* 判断轮播类型，根据类型执行对应的操作
*/
handleType() {
if (this.effect === "normal") {
this.ulStyle.paddingLeft = 0; // 将起始位置左侧的padding置为0
} else if (this.effect === "zoom") {
this.ulStyle.paddingLeft = "20px"; // 保证左侧有一定的位移
}
},
/**
* 移动处理
*/
handleMove() {
let moveX = this.itemWidth * this.index;
if (this.index === 0) {
moveX = 0;
this.handleType();
} else {
this.ulStyle.paddingLeft = 0; // 将起始位置左侧的padding置为0
if (this.effect === "zoom") {
moveX = moveX - 20;
}
}
this.swiperStyle = {
transform: "translateX(-" + moveX + "px)"
};
},
/**
* 循环移动处理
*/
handleLoopMove() {
// 当设置自动播放时，执行自动循环播放操作，否则，只执行下一次轮播效果
if (this.options.autoplay) {
let interval = this.options.interval ? this.options.interval : 3000;
this.intervalTime = setInterval(() => {
this.index++;
if (this.index > this.list.length - 1) {
this.index = 0; // 置为-1,下次轮播时index就会变成0，图片定位到起始位置
}
this.handleMove();
}, interval);
}
},
/**
* 触摸开始事件，记录下触摸点
*/
onTouchStart(e) {
this.touchStart = e.changedTouches[0]; // 记录开始触摸点
// 清除定时器
clearInterval(this.intervalTime);
},
/**
* 触摸结束事件，记录下触摸点，比较当前点和触摸开始点，判断触摸方向
*/
onTouchEnd(e) {
this.touchEnd = e.changedTouches[0];
// 比较移动的点位差，正数就是右滑，负数就是左滑
if (this.touchEnd.clientX - this.touchStart.clientX > 60) {
this.index--;
if (this.index <= 0) {
this.index = 0;
}
} else if (this.touchEnd.clientX - this.touchStart.clientX < -60) {
this.index++;
if (this.index >= this.list.length - 1) {
this.index = this.list.length - 1;
}
}
// 处理当前的滑动
this.handleMove();
// 同时开启自动轮播
this.handleLoopMove();
}
},
watch: {
list: function(e) {
this.calcWidth();
}
},
destroyed() {
// 清除定时器
if (this.autoplay) {
clearInterval(this.intervalTime);
}
}
};
</script>
<style lang="scss" scoped>
.swiper-component {
overflow: hidden;
height: 3rem;
position: relative;
ul {
white-space: nowrap;
height: 100%;
transition: 0.5s ease;
li {
list-style: none;
height: 100%;
float: left;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
&.zoom {
border-radius: 0.16rem;
transform: scale(0.93);
transition: 0.5s ease;
&.active {
transform: scale(1);
}
}
}
}
.swiper-dots {
position: absolute;
bottom: 0.16rem;
left: 50%;
transform: translateX(-50%);
display: flex;
.dots-item {
width: 0.1rem;
height: 0.1rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.7);
margin: 0rem 0.04rem;
&.active {
background: #409eff;
}
}
}
}
</style>

上张图片 两边留边

第三种方案(better-scroll) 现在特别火的一款插件
需要下载插件

npm install better-scroll --save

page 里面的 Lunbo3

<template>
<div class='some'>
<div v-if="swiperList.length" class="slider-wrapper" ref="sliderWrapper">
<h3 style="margin-top: 30px;">第三种方案(better-scroll)</h3>
<slider>
<div v-for="item in swiperList" :key="item.id">
<a :href="item.linkUrl">
<img :src="item.imgUrl" alt="">
</a>
</div>
</slider>
</div>
</div>
</template>

<script>
import Slider from "../../components/slider";
export default {
name: "Lunbo3",
data() {
return {
swiperList: [
{
imgUrl: require("../../assets/img/lun.1.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "1"
},
{
imgUrl: require("../../assets/img/lun.2.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "2"
},
{
imgUrl: require("../../assets/img/lun.3.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "3"
},
{
imgUrl: require("../../assets/img/lun.1.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "4"
},
{
imgUrl: require("../../assets/img/lun.5.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "5"
},
{
imgUrl: require("../../assets/img/lun.2.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "6"
}
]
};
},
components: {
Slider,
}
};
</script>

<style lang="scss" scoped>
.some{
width: 7.5rem;
overflow: hidden;
}
img{
height: 3.5rem;
}
</style>

components 里面的 slider index.vue

<template>
<div class="slider" ref="slider">
<div class="slider-group" ref="sliderGroup">
<slot></slot>
</div>
<div class="dots">
<span
class="dot"
v-for="(item, index) in dots"
:key="index"
:class="{active: currentPageIndex === index}"
></span>
</div>
</div>
</template>

<script>
import BScroll from "better-scroll";
import { addClass } from "../../util/dom";
export default {
name: "Slider",
props: {
loop: {
// 是否无缝循环轮播
type: Boolean,
default: true
},
autoPlay: {
// 是否自动轮博
type: Boolean,
default: true
},
interval: {
// 轮播的毫秒数
type: Number,
default: 3000
}
},
data() {
return {
dots: [],
currentPageIndex: 0 // 控制器默认的下标
};
},
mounted() {
setTimeout(() => {
// 设置 slider 的宽度
this._setSliderWidth();
// 初始化控制器
this._initDots();
// 初始化 slider
this._initSlider();
// 判断是否开启了循环轮播
if (this.autoPlay) {
this._play();
}
}, 20);
},
destroyed() {
clearTimeout(this.timer);
},
methods: {
// 设置 slider 的宽度
_setSliderWidth() {
this.children = this.$refs.sliderGroup.children;
let width = 0;
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) { // 当设置无缝循环轮播的时候, 默认加两张图片的宽度方便滚动
width += 2 * sliderWidth;
}
// 设置轮播图的总宽度
this.$refs.sliderGroup.style.width = width + "px";
},
// 初始化 slider
_initSlider() {
this.slider = new BScroll(this.$refs.slider, {
scrollX: true, // 滚动方向为 X 轴
scrollY: false, // 滚动方向为 Y 轴
momentum: false, // 当快速滑动时是否开启滑动惯性
snap: {
loop: this.loop, // 是否可以无缝循环轮播
threshold: 0.3, // 用手指滑动时页面可切换的阈值，大于这个阈值可以滑动的下一页
speed: 400 // 轮播图切换的动画时间
}, // 该属性是给 slider 组件使用的，普通的列表滚动不需要配置
click: true // 是否派发click事件，通常判断浏览器派发的click还是betterscroll派发的click，可以用_constructed，若是bs派发的则为true
});
this.slider.on("scrollEnd", () => {
// 滚动结束
let pageIndex = this.slider.getCurrentPage().pageX;
this.currentPageIndex = pageIndex;

if (this.autoPlay) {
this._play();
}
});
// 滚动开始之前
this.slider.on("beforeScrollStart", () => {
if (this.autoPlay) {
clearTimeout(this.timer);
}
});
},
// 初始化控制器
_initDots() {
this.dots = new Array(this.children.length);
},
// 开始轮播
_play() {
let pageIndex = this.currentPageIndex + 1;
this.timer = setTimeout(() => {
this.slider.next();
}, this.interval);
}
}
};
</script>

<style lang="scss" scoped>
.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{
width: 100%;
display: block;
}

.dots{
position: relative;
text-align: center;
bottom: 0.3rem;
font-size: 0;
}

.dot{
display: inline-block;
margin: 0 4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
&.active{
width: 20px;
border-radius: 5px;
background: red;
}

}

</style>

建立个文件夹 util 里面的dom.js 引入上面的组件中

export function addClass(el, className){
if(hasClass(el, className)){ // 判断需要添加的类名是否存在
return
}

// 先将变量转换成数组
let newClass = el.className.split(' ');
// 然后将类名添加到数组中
newClass.push(className);
// 将数组里面的值转换成字符串]
el.className = newClass.join(' ');
}

export function hasClass(el, className){
let reg = new RegExp('(^|\\s)' + className + '(\\s|$)');
return reg.test(el.className);
}

上图

**第四种方案(vue-awesome-swiper) **
page 文件里面的 Lunbo4

<template>
<div class='mome'>
<div v-if="swiperList.length" class="slider-wrapper" ref="sliderWrapper">
<!-- 第三种方案(vue-awesome-swiper) -->
<h3 style="margin-top: 30px;">第四种方案(vue-awesome-swiper)</h3>
<swiper :list="swiperList"></swiper>
</div>
</div>
</template>

<script>
// 第三种方案(vue-awesome-swiper)
import Swiper from '../../components/Swiper'

export default {
name: "Home",
data() {
return {
swiperList: [
{
imgUrl: require("../../assets/img/lun.1.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "1"
},
{
imgUrl: require("../../assets/img/lun.2.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "2"
},
{
imgUrl: require("../../assets/img/lun.3.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "3"
},
{
imgUrl: require("../../assets/img/lun.1.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "4"
},
{
imgUrl: require("../../assets/img/lun.5.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "5"
},
{
imgUrl: require("../../assets/img/lun.2.jpg"), // 图片路径
linkUrl: "", // 跳转路径
id: "6"
}
]
};
},
components: {
Swiper,
},
};
</script>

<style lang="scss" scoped>
.mome{
width: 7.5rem;
overflow: hidden;
}

.slider-wrapper{
position: relative;
}

</style>

components 里面的Swiper index.vue

<template>
<div>
<div class="wrapper">
<swiper :options="swiperOption">
<!-- slides -->
<swiper-slide v-for="(img, index) of list" :key="index" ref="mySwiper">
<img class="swiper-img" :src="img.imgUrl" alt="img.imgUrl">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</div>
</template>

<script>
export default {
name: "Lunbo4",
props: {
list: {
type: Array,
default: []
}
},
data() {
return {
swiperOption: {
autoplay: {
disableOnInteraction: false, //手动滑动后可以自动滑动
delay: 2500
},
loop: true, // 无缝轮播
pagination: {
el: ".swiper-pagination"
}
}
};
},
computed: {}
};
</script>

<style lang="scss" scoped>
/* 设置分页器未选中的样式 */
.wrapper >>> .swiper-pagination-bullet{
box-sizing: border-box;
width: 8px;
height: 8px;
border-radius: 4px;
background-color: #fff;
line-height: 8px;
text-align: center;
font-size: 12px;
margin: 0 5px;
}

/* 设置分页器选中的样式 */
.wrapper >>> .swiper-pagination-bullet-active{

width: 20px;
border-radius: 5px;
background-color: rgba(212, 62, 46, 1);
}
.wrapper{
width: 100%;
overflow: hidden;
background :#eee;
.swiper-img{
width: 100%;
}

}
img{
height: 3.5REM;
}

</style>

在min.js 里引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

最后 引入到自己想放入的组件中 我是放到 home组件里了 样式什么的自己微调一下吧

<template>
<div class='home'>
<lunbo1></lunbo1>
<Lunbo2></Lunbo2>
<Lunbo3></Lunbo3>
<Lunbo4></Lunbo4>
</div>
</template>

<script>

import Lunbo1 from '../page/Lunbo'
import Lunbo2 from '../page/Lunbo2'
import Lunbo3 from '../page/Lunbo3'
import Lunbo4 from '../page/Lunbo4'
export default {
name: "home",
data() {
return {

};
},
components: {
Lunbo3,
Lunbo1,
Lunbo2,
Lunbo4

},
methods: {

},

};
</script>

<style lang="scss" scoped>
.home{
height: 100%;
width: 7.5rem;
}
</style>

如果觉得哪里写得有问题 欢迎指正！！

• 点赞 2
• 收藏
• 分享
• 文章举报