TypeScript结合jQuery制作的仿iOS的UITableView控件

TypeScript结合jQuery制作的仿iOS的UITableView控件，支持点击、滑动删除、修改功能。可用于移动端APP的前端开发使用。

以下代为都是从项目中抽出来的，所以可能缺少部分图标和字体，需要稍作修改。

TypeScript

export default class AppTable {

    private selectEvent: Function;
    private removeEvent: Function;
    private editEvent: Function;

    constructor(selectEvent?: Function, removeEvent?: Function, editEvent?: Function) {
        this.selectEvent = selectEvent;
        this.removeEvent = removeEvent;
        this.editEvent = editEvent;

        this.init();
    }

    private init(): void {
        var lines = $(".apptable .row");
        var len = lines.length;
        var lastX: number;
        var lastXForMobile: number;

        // 按钮的宽度
        var buttonWidth = $(".apptable .row .action").width();
        // 用于记录被按下的对象
        var pressedObj: any;  // 当前左滑的对象
        var lastLeftObj: any; // 上一个左滑的对象

        // 用于记录按下的点
        var start: { x: number, y: number };
        // 偏移的值
        var offsetX = 0;
        // 当前编辑的索引
        var currentIndex = 0;

        for (var i = 0; i < len; ++i) {
            lines[i].addEventListener('touchstart', function (e) {
                lastXForMobile = e.changedTouches[0].pageX;
                pressedObj = this;
                currentIndex = $(this).index();
                var touches = e.touches[0];

                start = {
                    x: touches.pageX,
                    y: touches.pageY
                };
                offsetX = parseInt($(this).css('marginLeft'));
            });

            lines[i].addEventListener('touchmove', function (e) {
                var touches = e.touches[0];
                var delta = {
                    x: touches.pageX - start.x,
                    y: touches.pageY - start.y
                };

                if (Math.abs(delta.x) > Math.abs(delta.y)) {
                    e.preventDefault();
                }
                if (delta.x < 0) {
                    $(this).attr("style", "margin-left:" + delta.x + "px");
                } else {                    
                    if (offsetX < 0 && (offsetX + delta.x) < 0) {
                        $(this).attr("style", "margin-left:" + (offsetX + delta.x) + "px");
                    }
                }
                if (lastLeftObj && pressedObj != lastLeftObj) {
                    $(lastLeftObj).animate({ marginLeft: "0" }, 500);
                    lastLeftObj = null;
                }
            });

            lines[i].addEventListener('touchend', function (e) {
                if (lastLeftObj && pressedObj != lastLeftObj) {
                    $(lastLeftObj).animate({ marginLeft: "0" }, 500);
                    lastLeftObj = null;
                }
                var diffX = e.changedTouches[0].pageX - lastXForMobile;
                if (diffX < -60) {
                    $(pressedObj).animate({ marginLeft: "-" + buttonWidth + "px" }, 500); // 左滑
                    lastLeftObj && lastLeftObj != pressedObj &&
                        $(lastLeftObj).animate({ marginLeft: "0" }, 500);
                    lastLeftObj = pressedObj;
                } else if (diffX > 60) {
                    if (pressedObj == lastLeftObj) {
                        $(pressedObj).animate({ marginLeft: "0" }, 500);
                        lastLeftObj = null;
                    }
                } else {
                    $(pressedObj).animate({ marginLeft: "0" }, 500)
                }
            });
        }
        // 选中事件
        $(".apptable .section").click(
            () => this.selectEvent(currentIndex)
        );
        // 删除事件
        $(".apptable .row .action .delete").click(
            () => this.removeEvent(currentIndex)
        );
        // 编辑事件
        $(".apptable .row .action .edit").click(
            () => this.editEvent(currentIndex)
        );
    }
}

Html

<div class="apptable">
    <div class="row">
        <div class="section">
            <div><i class="icon-livingroom"></i><span>ET HOME - LIVING ROOM</span></div>
            <div><span>19.5°c</span><span><i class="icon-temperature"></i>32°</span></div>
        </div>
        <div class="action">
            <a class="delete">Delete</a>
            <a class="edit">Edit</a>
        </div>
    </div>
    <div class="row">
        <div class="section">
            <div><i class="icon-bedroom"></i><span>ET HOME - BEDROOM PURIFIER 01</span></div>
            <div><span>22°c</span><span><i class="icon-temperature"></i>19°</span></div>
        </div>
        <div class="action">
            <a class="delete">Delete</a>
            <a class="edit">Edit</a>
        </div>
    </div>
    <div class="row">
        <div class="section">
            <div><i class="icon-office"></i><span>ET HOME - BEDROOM PURIFIER 01</span></div>
            <div><span>22°c</span><span><i class="icon-temperature"></i>19°</span></div>
        </div>
        <div class="action">
            <a class="delete">Delete</a>
            <a class="edit">Edit</a>
        </div>
    </div>
</div>

CSS

.apptable {
    overflow:hidden;
    >.row{
        border-bottom: 1px solid rgba(12,0,51,.25);
        padding: 1rem 0 0 0rem;
        position: relative;
        width:100%;

        &:last-of-type{
            border-bottom:none;
        }
        span{
            font-family: "FiraSans";
            font-weight: 300;
            color: rgba(0,0,0,0.5);
        }
        i{
            zoom: 30%;
            float: left;
            opacity: 0.7;
        }
        >.section{
            margin-left:1rem;
            >div:first-of-type{
                >span{
                    font-size: 1.14rem;
                    line-height: 1.5rem;
                    margin-left: .5rem;
                }
            }
            >div:last-of-type{
                margin-top:0.5rem;
                position: relative;

                >span:first-of-type{
                    font-size: 3.2rem;
                }
                >span:last-of-type{
                    float: right;
                    position: absolute;
                    right: 1rem;
                    bottom: 1rem;
                }
            }
        }
        >.action{
            position: absolute;
            left: 100%;
            top: 0;
            height: 100%;
            width:12rem;

            >a{
                display: flex;
                justify-content: center;
                flex-direction: column;
                font-family: "FiraSans";
                font-weight: 300;
                height: 100%;
                text-align: center;
                float: left;
                font-size:1.28rem;
                color: #fff;
                width:6rem;
                &.delete{                    
                    background-color: rgb(255,98,101);
                }
                &.edit{                    
                    background-color: rgb(155,155,155);
                }
            }
        }
    }
}

原文链接：TypeScript结合jQuery制作的仿iOS的UITableView控件，转载请注明来源！