react 手写地址左滑动删除功能

展示主要文件address addressitem

代码如下：

address jsx 文件

import React,{Component} from 'react'
import AddressItem from './AddressItem'
import {List,Icon,NavBar} from 'antd-mobile'

import './style.css'
class Address extends Component {

    render() {
        return (
            <div className="address-content">
                <NavBar
                    icon={<Icon type="left" />}
                    mode="dark"
                    onLeftClick={() => this.props.history.goBack()}
                >地址管理</NavBar>

                <List>
                    <List.Item  arrow="horizontal">新增收获地址</List.Item>
                </List>
                <div className="address-list">
                    <AddressItem />
                    <AddressItem />
                </div>
            </div>
        )
    }

}

export default Address

 address css 文件：

.address-content .address-list{
    padding-top: 10px;
}

 addrressitem jsx 文件

import React,{Component} from 'react'

import './style.css'



class AddressItem extends Component {

    render() {
        return (
            <div className="address-item">
                <ul className="address" ref="address-dom">
                    <li>
                       中华人民共和国广东省广州市
                    </li>
                    <li>
                        <strong>carey一步</strong> 133xxxxxxxx
                    </li>
                </ul>
                <p className="handle" ref="handle">
                    <span>删除</span>
                </p>
            </div>
        )
    }
    componentDidMount() {
        const maxOffset = this.refs.handle.clientWidth;
        const addressDom = this.refs['address-dom'];

        let offsetL = 0, startTime = 0,startX = 0,startOffset = 0;
        var startHandler = function(event) {
            startTime = Date.now();
            startX = event.touches[0].pageX;
            offsetL = 0;
        }
        var moveHandler = function(event) {
            event.preventDefault();
            let currentOffset = event.touches[0].pageX - startX;
            if((currentOffset > 0 && startOffset === 0)
                || (currentOffset < 0 && startOffset === -maxOffset)) {
                startX = event.touches[0].pageX;
                offsetL = startOffset;
            }else {
                if(Math.abs(currentOffset) > maxOffset){
                    offsetL = -maxOffset - startOffset + (maxOffset + currentOffset) * 0.05
                }else {
                    offsetL = currentOffset + startOffset
                }
            }

            addressDom.style.webkitTransition = "-webkit-transform 0s ease-out";
            addressDom.style.webkitTransform = "translate3d("+offsetL+"px,0,0)";
        }
        var endHandler = function(event) {
            addressDom.style.webkitTransition = "-webkit-transform 0.2s ease-out"
            startOffset = offsetL = Math.abs(offsetL) > maxOffset/2 ? -maxOffset : 0;
            addressDom.style.webkitTransform = "translate3d("+offsetL+"px,0,0)";

        }

        addressDom.addEventListener('touchstart',startHandler,false);
        addressDom.addEventListener('touchmove',moveHandler,false);
        addressDom.addEventListener('touchend',endHandler,false);
    }
}

export default AddressItem;

 addressitem  css 文件

.address-item {
    position: relative;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #ddd;
    margin-top: -1px;
    box-sizing: border-box;
}
.address-item .address {
    position: relative;
    padding: 15px 50px 15px 40px;
    background: #fff;
    margin: 0;
    z-index: 2;
}
.address-item .address li {
    line-height: 18px;
    padding: 2px 0;
}
.address-item .handle{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0;
    background-color: #ff3b2f;
    color: #fff;
    width: 70px;
    margin: 1px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
}

 

转载于:https://www.cnblogs.com/careyyibu/p/8674305.html