React 用axios 获取遍历json 引入swiper轮播图

结构展示：

功能展示：

1.使用swiper轮播插件，

2.自动轮播，当前图片高亮小按钮

首先引入swiper和配置环境

1.npm install --save swiper

2.在src文件夹index.js下引入样式，避免打包失败

import Swiper from 'swiper/dist/js/swiper.js'

import 'swiper/dist/css/swiper.min.css'复制代码

3.安装依赖

npm install reactjs-swiper axios --save-dev

创建ReactSwiperExample组件，用于编写swiper的核心代码

1.在组件页面引入swiper

import Swiper from 'reactjs-swiper';复制代码

2.在组件页面引入axios

import axios from 'axios';复制代码

轮播组件所有代码：

import Swiper from 'reactjs-swiper';
import React,{ PureComponent } from 'react'
import axios from 'axios';
import './Index.css'

class ReactSwiperExample extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            swiperOptions: {
                preloadImages: true,
                autoplay: 1000,
                showPagination: true,
                autoplayDisableOnInteraction: false
            },
            items:[]
        }
    }
    //获取json图片信息
    componentDidMount() {
        axios.get('/navList.json').then( (response) => {
            console.log(response.data.data);
            this.setState({
                items: response.data.data
            })
        }).catch(e => (console.log(e)))
    }

    render() {
        return (
            <div>
                <Swiper swiperOptions={this.state.swiperOptions}
                             showPagination items={this.state.items}
                             className="swiper-example" />
            </div>
        )
    }
}

export default ReactSwiperExample;复制代码

组件css

/* common */
body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,code,form,input,textarea,p,th,td,fieldset,legend,figure{
    margin:0;
    padding:0;
}
html {
    font-size: 27.78vw;
}
body{
    font-family:"微软雅黑",Arial;
}
ul,ol{
    list-style:none;
}
a{
    text-decoration:none;
}
img{
    border:0;
}

.swiper-example{
    width: 100%;
    height: 2.44rem;
}
.swiper-example img{
    width: 100%;
    height: 2.44rem;
}复制代码

在public文件夹中创建navList.json

在ReactSwiperExample.js组件中用axios渲染出来即可

所有代码：

{"success": true,
  "data": [
    {
      "id": 1,
      "image": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547995774206&di=9b39eefa276cdaba21306b521b728991&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01368a5add99a5a80120927b13f4d0.jpg%402o.jpg",
      "title": "图片1"
    },
    {
      "id": 2,
      "image": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547995842548&di=732db8ddea9eede4a26ec82d6cff8831&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c23656fa188832f875a944fd533b.jpg",
      "title": "图片2"
    },
    {
      "id": 3,
      "image": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547995842536&di=bbe48ce81ff478b8eb167737babc8126&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0127c556c805cd32f875520f287aa7.gif",
      "title": "图片3"
    },
    {
      "id": 4,
      "image": "https://upload.jianshu.io/admin_banners/web_images/4570/5d4776585f0206ff2e807971a13b06ed7d494595.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540",
      "title": "图片4"
    },
    {
      "id": 5,
      "image": "https://upload.jianshu.io/admin_banners/web_images/4574/d5c5ea3e984c8c08071b467c2dfe5bd2d0acf7b8.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540",
      "title": "图片5"
    }
  ]
}
复制代码