用一个swiper例子来写一下生命周期

最新推荐文章于 2024-06-12 13:41:17 发布

原创最新推荐文章于 2024-06-12 13:41:17 发布 · 371 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#用一个swiper例子来写一下生命周期

react 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用Swiper组件实现响应式轮播图，包括安装、配置及动态加载图片的过程。通过实例演示了如何在React项目中引入Swiper，设置其样式，以及如何通过fetch请求获取数据并动态渲染轮播图。

思维：

引入swiper
$ yarn add swiper
在对应的组件中引入
引入css样式
引入html结构
实例化

import React, { Component,Fragment } from 'react';
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
import './index.css'
const SwiperItem = ( props ) => {
return (
    <div className = "swiper-slide">
    <img src = { props.item.img }/>
</div>
)
}
class SwiperComponent extends Component {
constructor () {
    super()
    this.state = {
    banners: []
  }
}
render () {
return (
<Fragment>
            <div className = "swiper-container">
            <div className = "swiper-wrapper">
  {
            this.state.banners.map( ( item,index ) => {
            return <SwiperItem item = {item} key = { item.id }></SwiperItem>
  })
}
    </div>
            <div className = "swiper-pagination"></div>
            <div className = "swiper-button-prev"></div>
            <div className = "swiper-button-next"></div>
            <div className = "swiper-scrollbar"></div>
   </div>
</Fragment>
)
}
componentDidMount () {
    fetch('/data.json')
    .then ( res => res.json() )
    .then ( data => {
    this.setState({
    banners: data
})
setTimeout ( () => {
        this.swiper = new Swiper ('.swiper-container', {
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
        el: '.swiper-pagination',
        },
        // 如果需要前进后退按钮
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        },
        // 如果需要滚动条
        scrollbar: {
        el: '.swiper-scrollbar',
     },
  })
},0)
})
.catch ( error => {
   if (error) throw error
})
}
shouldComponentUpdate () {
if ( this.swiper ) {
     return false
     }else {
     return true
  }
}
componentDidUpdate () {
// 第一中方案 只要有数据变化， 那么这个钩子函数就要执行， 那么this.swiper就会重复实例化
/*
this.swiper = new Swiper ('.swiper-container', {
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
*/
}
}
export default SwiperComponent