touch事件实现拖动分隔线改变上下div高度

效果

html结构

<div class="root">
        <div id="head">
            <div class="top"></div>
            <div class="line"
                 @touchstart="touchstart"
                 @touchmove="touchmove"
                 @touchend="touchend"
            ></div>
        </div>
        <div class="bottom"></div>
    </div>

css

.root{
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        display: flex;
        flex-direction: column;
    }
    #head {
        height: 50px;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .top {
           flex: 1;
           width: 100%;
           background: cornflowerblue;
    }
    .line {
        width: 100%;
        height: 10px;
        background: black;
    }
    .bottom {
        flex: 1;
        width: 100%;
    }

方法

此处touch事件的添加方法采用vue的方法模板，js可直接通过对‘line’这个div通过addevent或jquery语法添加touchstart、touchmove及touchend事件

touchstart(e) {
                this.startX = e.touches[0].clientX;
                this.startY = e.touches[0].clientY;
                // 记录开始移动时初始head的高度
                this.topHeight = document.getElementById('head').clientHeight;
            },
touchmove(e) {
                this.moveX = e.touches[0].clientX;
                this.moveY = e.touches[0].clientY;
                this.disX = this.moveX - this.startX;
                this.disY = this.moveY - this.startY;
                document.getElementById('head').style.height = this.disY + this.topHeight + 'px';
            },

思路概述

因为head和bottom的父元素为flex布局且bottom的flex设为1，通过这种方法bottom占据剩余高度，因此只要在touch事件中改变head的高度，上下两部分的高度即可动态改变。
在touch事件中唯一的注意点就是在设置head的高度时应该在其原先高度的基础上进行增减