最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

這篇文章主要介紹了react中swiper插件如何使用，具有一定借鑒價值，需要的朋友可以參考下。下面就和我一起來看看吧。

創(chuàng)新互聯(lián)是一家業(yè)務(wù)范圍包括IDC托管業(yè)務(wù),雅安服務(wù)器托管、主機租用、主機托管，四川、重慶、廣東電信服務(wù)器租用,達州服務(wù)器托管，成都網(wǎng)通服務(wù)器托管,成都服務(wù)器租用,業(yè)務(wù)范圍遍及中國大陸、港澳臺以及歐美等多個國家及地區(qū)的互聯(lián)網(wǎng)數(shù)據(jù)服務(wù)公司。

方法：1、使用“npm i swiper -S”命令安裝swiper包；2、使用import語句引入swiper的css和js文件；3、在render中編寫swiper組件的結(jié)構(gòu)，并在react的掛載生命周期函數(shù)內(nèi)創(chuàng)建Swiper對象即可。

• 該方法適用于所有品牌的電腦。

react中使用基本swiper

第一步：安裝包

npm i swiper -S

第二步：引包

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

第三步：寫html

    
    

        
        

            
            Slide 1

            Slide 2

            Slide 3

        


        
        


        
        

        


        
        

    

第四步：在react聲明周期里創(chuàng)建Swiper對象進行調(diào)用

// 直接引用數(shù)據(jù)將，new Swiper放在componentDidMount
// 用axios請求數(shù)據(jù)，new Swiper放在componentDidUpdate  

    new Swiper('.swiper-container', {
        direction: 'vertical',//豎向輪播
        loop: true,//無縫輪播
        pagination: {//小圓點分頁
            el: '.swiper-pagination',
        },
        navigation: {//左右分頁
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        scrollbar: {//下劃線分頁
            el: '.swiper-scrollbar',
        }
    })

以上就是react中swiper插件如何使用的詳細內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎來創(chuàng)新互聯(lián)行業(yè)資訊！

網(wǎng)站題目：react中swiper插件如何使用
網(wǎng)站鏈接：http://fisionsoft.com.cn/article/jehhjh.html