Swiper实现轮播图

最新推荐文章于 2024-07-09 11:01:29 发布

江湖yi山人

最新推荐文章于 2024-07-09 11:01:29 发布

阅读量259

点赞数

本文链接：https://blog.csdn.net/qq_30997503/article/details/115731342

版权

本文详细介绍了如何使用React编写轮播组件，包括初始化Swiper的方法、组件的绑定与轮播状态管理。展示了如何利用useState和useEffect Hook进行组件状态控制，并在组件挂载、更新和卸载时正确地初始化和销毁轮播。

摘要由CSDN通过智能技术生成

以react为例，组件写法如下：

1、初始化轮播方法

具体参数详情见：https://www.xiaoshu168.com/jquery/103.html

  initSwiper = () => { // 定义轮播
    this.mySwiper = new Swiper(this.swiperRef.current, {
      loop: true, // 形成环路，即从最后一页跳转到第一页
      speed: 1000, // 页面切换间隔
      autoplay: { // 滑动效果
        delay: 1500, // 滑动间隔
        disableOnInteraction: false
      },
      centeredSlides: true, // 居中显示，默认居左
      navigation: { // 事件选择器
        nextEl: '.swiper-button-next', // 下一页
        prevEl: '.swiper-button-prev', // 上一页
      },
      pagination: { // 分页器
         el: '.swiper-pagination'
      }
    })
  }
  destorySwiper = () => { // 销毁
    if (!this.mySwiper) return
    if (this.swiperRef.current) {
      this.mySwiper.destroy(true, true)
    }
  }

2、绑定轮播对象

  render() {
    const { data } = this.props
    return <div>
      <div ref={this.swiperRef} className="swiper-container">
        <div className="swiper-wrapper">
          { // 轮播图内容
            (data || []).map((item, index) => <div key={index} className="swiper-slide">
              {
                item.map((cell, key) => <div className="item" key={key}>
                  <div className="item-img">
                    <img src={cell.img} alt=""/>
                  </div>
                  <div className="item-other"} dangerouslySetInnerHTML={{ __html: cell.name }}></div>
                </div>)}
            </div>)
          }
        </div>
      </div>
      <div className="swiper-pagination"></div>
      <div className="swiper-button-prev"></div>
      <div className="swiper-button-next"></div>
    </div>
  }

3、触发轮播

  componentDidMount() {
    this.initSwiper()
  }

  componentDidUpdate(prevProps) {
    if (this.props.data !== prevProps.data) {
      this.destorySwiper()
      this.initSwiper()
    }
  }

  componentWillUnmount() {
    this.destorySwiper()
  }

类写法如下：

import { useState, useEffect, useRef } from 'react'
export default function ({ data }) {
	const [mySwiper, setMySwiper] = useState(() => {})
	const swiperRef = useRef()
	useEffect(() => {
	  initSwiper()
	  return () => destorySwiper() // 这里的return函数等效于componentWillUnmount
	}, []) // []等效于componentDidMount
	useEffect(() => {
	  destorySwiper()
      initSwiper()
	}, [data]) // 监听data，等效于componentDidUpdate
	useEffect(() => initSwiper(), [])
	const initSwiper = () => { // 定义轮播
	  setMySwiper(new Swiper(this.swiperRef.current, {
	    loop: true, // 形成环路，即从最后一页跳转到第一页
	    speed: 1000, // 页面切换间隔
	    autoplay: { // 滑动效果
	      delay: 1500, // 滑动间隔
	      disableOnInteraction: false
	    },
	    centeredSlides: true, // 居中显示，默认居左
	    navigation: { // 事件选择器
	      nextEl: '.swiper-button-next', // 下一页
	      prevEl: '.swiper-button-prev', // 上一页
	    },
	    pagination: { // 分页器
	       el: '.swiper-pagination'
	    }
	  }))
	}
	const destorySwiper = () => { ... }
    return <div>
      <div ref={swiperRef} className="swiper-container">
        
    </div>
  }

FROM
https://blog.csdn.net/sunshine_hl/article/details/50508383?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control
https://www.xiaoshu168.com/jquery/103.html