https://better-scroll.github.io/docs/zh-CN/plugins/slide.html#%E4%BB%8B%E7%BB%8D
<template>
<div class="slider" ref="rootRef">
<div class="slider-group">
<div class="slider-page" v-for="item in sliders" :key="item">
<img :src="item" />
</div>
</div>
<!-- 有几个配置就显示几个点 -->
<div class="dots-wrapper">
<span
class="dot"
v-for="(item, index) in sliders"
:key="item.id"
:class="{ active: currentPageIndex === index }"
>
</span>
</div>
</div>
</template>
<script>
// import { ref, onMounted } from "vue";
import BScroll from "@better-scroll/core";
import Slide from "@better-scroll/slide";
BScroll.use(Slide);
export default {
name: "slider",
data() {
return {
sliders: [
"https://img-blog.csdnimg.cn/a20529a4c1854cb28895a83b3535c6d5.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW96aGF6aGF6aGF6aGE=,size_16,color_FFFFFF,t_70",
"https://img-blog.csdnimg.cn/img_convert/62973678a4527d0d4fd30bafb5d8e94c.png",
"https://img-blog.csdnimg.cn/img_convert/9d97eec15b3ab43ebd5a33c6c092ec57.png",
"https://img-blog.csdnimg.cn/img_convert/bbdb3b742e5d141ca1613ae2f4ee405e.png",
],
currentPageIndex: 0,
};
},
mounted() {
const slider = new BScroll(this.$refs.rootRef, {
click: true,
scrollX: true,
scrollY: false,
momentum: false,
bounce: false,
probeType: 2,
slide: true,
});
slider.on("slideWillChange", (page) => {
this.currentPageIndex= page.pageX;
});
},
};
</script>
<style lang="scss" scoped>
.slider {
min-height: 1px;
font-size: 0;
touch-action: pan-y;
.slider-group {
position: relative;
overflow: hidden;
white-space: nowrap;
.slider-page {
display: inline-block;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
img {
display: block;
width: 100%;
height: 100px;
}
}
}
.dots-wrapper {
position: absolute;
left: 50%;
bottom: 12px;
line-height: 12px;
transform: translateX(-50%);
.dot {
display: inline-block;
margin: 0 4px;
width: 8px;
height: 8px;
border-radius: 50%;
background:rgb(182, 182, 196);
&.active {
width: 20px;
border-radius: 5px;
background: rgb(238, 234, 241);
}
}
}
}
</style>