轮播图下面分页导航点击出现蓝色边框（背景），苹果11兼容问题

最新推荐文章于 2024-07-30 16:49:30 发布

liberalhumblehopeful

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量181

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/fhrlhh/article/details/130112231

版权

解决方法：加上样式：


.body_part1 .part1_coup .swiper-pagination .swiper-pagination-bullet{cursor:auto;}

.body_part1 .part1_coup .swiper-pagination .swiper-pagination-bullet:focus{outline:none;}

完整代码：

<div class="cont_bag">
								<div class="swiper-container con_swiper">
									<ul class="swiper-wrapper step_bg" :class='"ul" + num'>
										<!-- :class="num==4 ? 'swiper-wrapper step_bg1' : 'swiper-wrapper step_bg'"  -->
										<li class="swiper-slide li" v-for="(item,index) in old_yhq" :key="index">
											<div v-for="(v,k) in item.list" :key="k" class="prz">
												<img :data-src="'./images/'+`${v.img}`+'.png'" class="yhq_img">
												<p class="old_text"
													@click="off.indexOf(old_yhq[index].list[k].prizeCode) =='-1'?lms_method(v):couponTo(v.typeDw)">
													<a>{{off.indexOf(old_yhq[index].list[k].prizeCode) == '-1' ? '抢占秒杀券' : '去使用'}}</a>
												</p>
											</div>
										</li>
									</ul>
								</div>
								<div class="swiper-pagination old_pagination"></div>
							</div>

.body_part1 .part1_coup .swiper-pagination{width:100%;margin-top:0.5rem;}
.body_part1 .part1_coup .swiper-pagination .swiper-pagination-bullet{width:0.5rem;height:0.5rem;border-radius:0.5rem;border:1px solid #d67a0d;background:#d67a0d;margin-left:0.3rem;cursor:auto;}
.body_part1 .part1_coup .swiper-pagination .swiper-pagination-bullet-active{width:1rem;height:0.5rem;border-radius:0.5rem;background:#d67a0d;margin-left:0.3rem;}
.body_part1 .part1_coup .swiper-pagination .swiper-pagination-bullet:focus{outline:none;}

   mounted: function () {
        var t = this;
        t.initConSwiper(); //初始化轮播图
    },
// 初始化swiper
        initConSwiper: function () {
            var t = this;
            t.swpier1 = new Swiper('.con_swiper', {
                slidesPerView: 1,
                slidesPerGroup: 1,
                pagination: {
                    el: '.old_pagination',
                    clickable: true,
                },
                on: {
                    slideChangeTransitionStart: function () {
                        t.num = this.activeIndex
                        console.log(t.num);
                    },
                },
            })
        },