younth / React Swipes
Licence: mit
🔥 基于React的移动端卡片滑动组件
Stars: ✭ 177
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Swipes
Swiper
Most modern mobile touch slider with hardware accelerated transitions
Stars: ✭ 29,519 (+16577.4%)
Mutual labels: swipe, slider, swiper
Vue Easy Slider
Slider Component of Vue.js.
Stars: ✭ 313 (+76.84%)
Mutual labels: swipe, slider, swiper
React Native Web Swiper
Swiper-Slider for React-Native and React-Native-Web
Stars: ✭ 125 (-29.38%)
Mutual labels: swipe, slider, swiper
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+6720.34%)
Mutual labels: swipe, slider, swiper
Vue Swipe Mobile
😃 A siwpe (touch slider) component for Vue2
Stars: ✭ 97 (-45.2%)
Mutual labels: swipe, slider, swiper
React Native Swiper Flatlist
👆 Swiper component implemented with FlatList using Hooks & Typescript + strict automation tests with Detox
Stars: ✭ 217 (+22.6%)
Mutual labels: swipe, slider, swiper
Vuetify Swipeout
👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.
Stars: ✭ 117 (-33.9%)
Mutual labels: swipe, slider, swiper
Vue Slick Carousel
🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay
Stars: ✭ 447 (+152.54%)
Mutual labels: slider, swiper
Vue Plain Slider
A simple slider component for Vue.js
Stars: ✭ 146 (-17.51%)
Mutual labels: slider, swiper
skeleton-carousel
Carousel component. Horizontal and vertical swipe navigation
Stars: ✭ 31 (-82.49%)
Mutual labels: slider, swipe
Shuffle
🔥 A multi-directional card swiping library inspired by Tinder
Stars: ✭ 535 (+202.26%)
Mutual labels: swipe, swiper
Slider
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: ✭ 2,046 (+1055.93%)
Mutual labels: swipe, slider
RN-intro-screen
Usage of intro / welcome screen in react-native as onboarding slider swiper
Stars: ✭ 15 (-91.53%)
Mutual labels: slider, swiper
slider-manager
simple wrapper to create sliders focused on animations
Stars: ✭ 28 (-84.18%)
Mutual labels: slider, swipe
Tiny Swiper
Ingenious JavaScript Carousel powered by wonderful plugins. Lightweight yet extensible. Import plugins as needed, No more, no less.
Stars: ✭ 1,061 (+499.44%)
Mutual labels: slider, swiper
React Soft Slider
Simple, fast and impartial slider
Stars: ✭ 54 (-69.49%)
Mutual labels: swipe, slider
vue-active-swiper
🌴 A Mobile-oriented、No dependencies、Lightweight Swiper component for Vue
Stars: ✭ 33 (-81.36%)
Mutual labels: slider, swiper
pinar
🌲☀️ Customizable, lightweight React Native carousel component with accessibility support.
Stars: ✭ 214 (+20.9%)
Mutual labels: slider, swiper
react-swipes
打造最好用的React 移动端卡片滑动 组件。已支持卡片自动播放,配置加入
autoPlay
参数即可。
为什么要造轮子
目前react component里面 基于移动端轮播/幻灯片 组件,最熟悉应该是react-swipe
这个库了。且看这个组件的构成:
- react-swipe: 引入swipe-js-iso,创建react组件
- swipe-js-iso: 基于swipe.js的一个Pull Request
也就是说,整个组件是基于几年前的swipe.js的,这个库三四年没更新了,看提问,作者在12年说要发个swipe2,结果不了了之,导致bug修复很慢,功能支持不全。比如我想做这个效果:
尴尬啊,react-swipe
现在的能力根本支持不了(因为swipe是针对焦点图设计的,写死了子元素宽度是父级的宽度)
解决方案
不用react的情况下,swiper.js 是个不错的选择,但是考虑这个库太大了(5000行+),为一个卡片滑动实在不值得。最后还是自己搞了个react-swipes,为的就是快速方便的实现上面这种卡片切换效果。
安装
npm i react-swipes --save
使用
原理
swipes不依赖任何css,不会去改变子item的样式,也就是说,css完全控制在自己的代码中。所以有必要了解卡片滑动的原理:
// 三层滑动原理,动的是第二层
// 第一层设置固定宽度 ,超过部分设置为不显示 overflow: hidden;
<div>
//第二层设置为实际需要的宽度,即子div的n倍,有间距需要算上间距
<div>
//第三层,实际item 内容的宽度
<div></div>
</div>
</div>
这是滑动的基础布局,最终的滑动也就是改变第二层div的translateX
值。再加上transition
过渡效果,即可实现整个区域的运动,而最外层元素设置了溢出隐藏,这样整体效果就是单张卡片在运动了。
具体使用
import ReactSwipe from 'react-swipes'
// swipes 的配置
let opt = {
distance: 620, // 每次移动的距离,卡片的真实宽度
currentPoint: 1,// 初始位置,默认从0即第一个元素开始
autoPlay: true, // 是否开启自动播放
swTouchstart: (ev) => {
},
swTouchmove: (ev) => {
},
swTouchend: (ev) => {
let data = {
moved: ev.moved,
originalPoint: ev.originalPoint,
newPoint: ev.newPoint,
cancelled: ev.cancelled
}
console.log(data);
this.setState({
curCard: ev.newPoint
})
}
}
// dom 部分
// 第一层div
<div className="card-swipe" >
// 第二层div react-swipes生成一个className为 card-slide的div
<ReactSwipe className="card-slide" options={opt}>
// 第三层,即本身的item
this.state.card.length && this.state.card.map((item, index) => <div className="item" key={index}> </div>
</ReactSwipe>
</div>
demo
todo
- 现在把css完全暴露给使用者了,这样第二层div的宽度(第三层元素的宽度和)需要大家在代码中计算,不是很方便,后续会把这块逻辑放到组件里面去,开发者只需要配置卡片基础属性即可。
- 卡片滑动过程想实现类似上面的缩放效果,目前需要在
swTouchmove
swTouchend
钩子里面自己去实现,后面会把这个效果做到组件里面去,开发者选择是否开启。
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].