React 用axios 獲取遍歷json 引入swiper輪播圖

Winter_Wang發表於2019-01-20
ReactiOSJSON

結構展示：

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"
    }
  ]
}
複製程式碼


相關文章