vue、react关于轮播图的解决方案

最新推荐文章于 2025-04-02 15:51:45 发布

原创最新推荐文章于 2025-04-02 15:51:45 发布 · 246 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

我的理解

本文介绍如何使用vue-awesome-swiper和swiper插件在Vue与React项目中实现轮播图功能。对于Vue，通过安装vue-awesome-swiper并配置main.js文件及在组件内设置模板来实现。而在React中，则通过直接操作DOM实现轮播效果。

1、vue轮播图安装插件vue-awesome-swiper

npm install vue-awesome-swiper@3 --save
特别注意版本问题，这个问题很大

2、在main.js中配置

import VueAwesomeSwiper from 'vue-awesome-swiper' 
import 'swiper/dist/css/swiper.css'   //引入相应的css样式，高版本的因为没有对应文档（特别注意），所以经常报错
Vue.use(VueAwesomeSwiper, /*   { default options with global component } */)

3、vue中template 的设置

 <swiper :options="swiperOption">
   <swiper-slide
     class="swiper-slide"
     v-for="(item, index) in banners"
     :key="index"
   >
     <img :src="item" />
   </swiper-slide>
   <!-- 分页器 -->
   <div class="swiper-pagination" slot="pagination"></div>
 </swiper>

4、在data中相应设置

  data() {
    return {
      banners: [
        "/img/2.c70ce5a5.png",
        "/img/headImg.81a1e41a.jpg",
        "/img/timg.3c725aee.jpg",
      ],
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
        },
        autoplay: {
          delay:1500,
          disableOnInteraction:false
        },
        loop: true, 
      },
    };

5、相关网站

https://github.com/surmon-china/vue-awesome-swiper 官方网站
https://www.swiper.com.cn/api/progress/191.html swiper中文网中相关滑动配置
https://segmentfault.com/a/1190000016402768 转载网友微博

（2）# 1、react 轮播图所用插件swiper

npm i swiper@3.4.2 -s

2、如果你的swiper里面轮播的内容是写死的的，new swiper可以放在组件componentDidMount周期里面

componentDidMount(){
    new Swiper ('.swiper-container',{
    autoplay:1000,
    loop: true，
    })
  }

如果你的资源，会更新，是后期获取的，那么你的new swiper应该写在组件的componentDidUpdate 里面，这样的话，可以更新swiper，避免出现不轮播，效果出不来的情况

componentDidUpdate(){
    new Swiper ('.swiper-container',{
      autoplay:2000,
      loop: true
      })
  }

3、swiper的引入

import Swiper from "swiper/dist/js/swiper"
import "swiper/dist/css/swiper.css"

4、渲染数据

<div className="swiper-container">
              <div className="swiper-wrapper">
                {this.state.banner.map((items,imgs_index)=>{
                    return (
                    <div className="swiper-slide" key={items.banner_img}>
                        <img src={items.banner_img}  alt=''></img>
                  </div>
                  )
                })}
              </div>
          </div>

5、轮播可以这样写

autoplay: 1000, 
autoplayDisableOnInteraction: false,

标签

#vue #js #react #javascript #html