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

栏目: jQuery · 发布时间: 5年前

内容简介:1.使用swiper轮播插件,2.自动轮播,当前图片高亮小按钮

结构展示:

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

功能展示:

1.使用swiper轮播插件,

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

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

首先引入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"
    }
  ]
}
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

x86/x64体系探索及编程

x86/x64体系探索及编程

邓志 / 电子工业出版社 / 2012-10-1 / 119.00元

本书是对Intel手册所述处理器架构的探索和论证。全书共五大部分,从多个方面对处理器架构相关的知识进行了梳理介绍。书中每个章节都有相应的测试实验,所运行的实验例子都可以在真实的机器上执行。 通过阅读本书,读者应能培养自己动手实验的能力。如果再有一些OS方面的相关知识,基本上就可以写出自己简易的OS核心。 本书适合有一定的x86基础知识,且对了解处理器架构及编程感兴趣的读者阅读。一起来看看 《x86/x64体系探索及编程》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具