react-swiper 如何实现滑动小卡片的移动？

最新推荐文章于 2024-07-02 22:14:33 发布

转载最新推荐文章于 2024-07-02 22:14:33 发布 · 640 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/panax/p/9367567.html

文章标签：

#javascript #ViewUI

本文介绍了一个基于React的轮播组件ReactSwipes的使用方法。通过导入ReactSwipes插件并设置样式，实现了一个轮播卡片组件SwiperCard。该组件能够响应用户的滑动操作，并展示传入的商品信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引入插件

import ReactSwipes from 'react-swipes';
import './swiperCard.css';

2.代码构成

export default class SwiperCard extends Component {
constructor(props) {
super(props);
this.state = {
data: this.props.item,
changeEndTime: this.props.item.endTime

    }

}
render() {
    // swipes 的配置
    let opt = {
        distance: 70, // 每次移动的距离，卡片的真实宽度，需要计算
        currentPoint: 0, // 初始位置，默认从0即第一个元素开始
        swTouchend: (ev) => {
            let data = {
                moved: ev.moved,
                originalPoint: ev.originalPoint,
                newPoint: ev.newPoint,
                cancelled: ev.cancelled
            }
             this.setState({
                 curCard: ev.newPoint
             })
        }
    }
    return(
        
                    <ReactSwipes className="card-slide" options={opt}>
                        {
            this.props.item.subjectGoods.map((item,index)=>{}               
                            
           }          
                                
                    </ReactSwipes>
    );
}

}

转载于:https://www.cnblogs.com/panax/p/9367567.html