react swipe的使用方法:1、透過「npm install swiper -s」在react專案中安裝swiper;2、引入「import React,{Component} from 'react'...」即可。
本文操作環境:Windows7系統、react17.0.1、Dell G3。
react swipe用法是什麼?
React中使用swiper
雖然用ui框架有很多是有輪播圖,走馬燈的,但是有時候我們的需求是這些都無法滿足的,
在這裡我這個菜鳥遇到了要求圖文列表可以左右滑動的情況,找了很久還是swiper適合我
下面展示一下我的用法:
首先,react專案中安裝swiper
npm install swiper -s
然後再需要用到swiper的元件中引入:
import React,{Component} from 'react' import './new.css' import Swiper from 'swiper/dist/js/swiper.js' import 'swiper/dist/css/swiper.min.css' class New extends Component{ constructor(props){ super(props); this.state={ newlist:[0,1,2,3,4,5,6] } } componentDidMount() { new Swiper('.swiper-container', { slidesPerView: 3, centeredSlides: true, virtual: { slides:this.state.newlist, } }) } render(){ return( <p> </p><p> </p><p> </p> ) } } export default New;
效果是這樣的:
可以左右滑動
推薦學習:《react影片教學》
以上是react swipe用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!