修改vux组件轮播图样式的问题

最新推荐文章于 2023-12-07 12:12:08 发布

原创最新推荐文章于 2023-12-07 12:12:08 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

小知识点同时被 2 个专栏收录

35 篇文章

订阅专栏

vue知识点

22 篇文章

订阅专栏

一位前端新手分享轮播组件配置笔记。通过隐藏组件配置的小圆点，自定义小点，利用@on-index-change事件，结合自定义index判断改变小按钮颜色，实现scroll X效果，还给出了html和css部分代码。

我是刚入门的前端小菜鸟，代码很low，做个笔记把
1.将组件配置的小圆点隐藏，
2，自己来写两个需要的小点，
3，然后通过@on-index-change (currentIndex) 轮播 index 变化时触发的这个事件
因为我这边是想做到scroll X的效果，所以没有采用自动轮播，里面的内容也是采用自行配制的，所以这边自定义一个index,通过它来判断从而改变小按钮的颜色，代码如下
html部分
<swiper
@on-index-change=‘add()’
:show-dots=‘flag’ height=“100px”>

它无孔不入

你无处可藏

<div class='btn'>
  <span id='id1' class='normal active'></span>
  <span id='id2' class='normal'></span>
</div>
js部分
<script>

import { Swiper,SwiperItem} from ‘vux’
export default {
components: {
Swiper,
SwiperItem

},
methods: {
add(){
this.index++
var aa = document.getElementById(‘id1’).classList
var bb = document.getElementById(‘id2’).classList
aa.remove(‘active’)
bb.add(‘active’)
if(this.index>2){
this.index=1
bb.remove(‘active’)
aa.add(‘active’)
}

},
data () {
return {
index:1,
flag:false

}
}

css部分