vue 使用swiper时，ie浏览器的兼容问题

最新推荐文章于 2023-06-25 17:14:58 发布

我真的是落叶

最新推荐文章于 2023-06-25 17:14:58 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/ZCJSGSZ/article/details/110232522

版权

vue项目使用swiper时，无法兼容ie浏览器。
解决办法：引入swiper，在页面上使用div class命名的方式

 plugins: [
    "@/plugins/swiper",
   ]

<div class="swiper-box">
     <swiper :options="swiperOption" ref="mySwiper">
            <swiper-slide 
                class="swiper-slide" 
                v-for="(item,index) in service" 
                :key="index"  
                >
               <img :src="item.thumb_url"
                            fit="cover"
                            class="e-images"
                            @click="toDetail(item)"
                    />
                    <div class="li-title">
                        <li class="liTitle">
                        {{ item.name }}
                        </li>
                    </div>
            </swiper-slide>
        </swiper>
            <a  class="swiper-button-next" >
                <i class="el-icon-arrow-left"  @click="next()"></i>
            </a>
            <a  class="swiper-button-prev">
                <i class="el-icon-arrow-right" @click="prev()"></i>
            </a>
        </div>
<script>
export default {
 data() {
        return {
            swiperOption:{
                //设置点击箭头
                navigation: {
                    nextEl: '.swiper-button-next', 
                    prevEl: '.swiper-button-prev'
                },
                slidesPerView :3,
                //开启循环模式
                loop: true
            }
        }
  },
}
</script>