react中swipe怎么用
这篇文章主要介绍了react中swipe怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联建站专注于禄劝企业网站建设,成都响应式网站建设公司,商城系统网站开发。禄劝网站建设公司,为禄劝等地区提供建站服务。全流程按需定制制作,专业设计,全程项目跟踪,创新互联建站专业和态度为您提供的服务
react swipe的使用方法:1、通过“npm install swiper -s”在react项目中安装swiper;2、引入“import React,{Component} from 'react'...”即可。
本文操作环境:Windows7系统、react17.0.1、Dell G3。
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(
) } } export default New;
可以左右滑动
感谢你能够认真阅读完这篇文章,希望小编分享的“react中swipe怎么用”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
文章题目:react中swipe怎么用
转载来于:http://pwwzsj.com/article/ipopcs.html