标签：左滑 卡片 txtStyle 程序实现 disY disX state let 按钮

实现类似ios端微信的左滑显示置顶、删除按钮的功能，首先需将按钮部分设为绝对定位，并且right设为负值溢出屏幕。利用小程序事件处理的api，分别读取触摸开始，触摸移动时，触摸结束的X/Y坐标，根据差值来改变整个卡片的位置。

这里有一个细节，为了防止按钮的点击干扰到卡片主部分的滑动，需要将整个卡片分为两部分。

<View style={`${positionStyle[index]}`}>
    <View 
        onTouchStart={this.moveTaskStart}
        onTouchMove={this.moveTask}
        onTouchEnd={this.moveTaskEnd}
    >
        这是主要的卡片部分
    </View>

    <View style="right: -260px;">这是滑动后出现的按钮部分</View>
</View>

这里使用的是Taro框架，方法与原生事件api一样，在开始滑动时分别存入X,Y坐标，在手指移动过程中计算移动的距离，当X的移动距离大于整个按钮部分的一班，展开按钮。

核心功能的实现，只需要分析X坐标即可，但因为用户可能在上下滑动过程中x坐标也会偏移造成按钮的展开，所以需要在move与end两部分都计算垂直坐标的改变与水平坐标改变形成的角度，当角度过大，视为上下滑动，按钮不展开。
完整代码如下：

moveTaskStart(e) {
    if (e.touches.length == 1) {
        //触摸屏上只有一个触摸点
        this.setState({
            // 开始触摸屏幕的X坐标
            startX: e.touches[0].clientX,
            startY: e.touches[0].clientY
        });
    }
}

moveTask(e) {
    if (e.touches.length == 1) {
        let moveX = e.touches[0].clientX;
        let moveY = e.touches[0].clientY;
        // 移动距离
        let disX = this.state.startX - moveX;
        let disY = this.state.startY - moveY;
        let angle = disY > 0 ? disY / disX : -disY / disX;
        let btnWidth = this.state.btnWidth;
        let txtStyle = "";
        if (disX == 0 || disX < 30) {
            //右滑动
            txtStyle = "left:0px";
        } else if(angle > 0.5) {
            return;
        } else if (disX > 30 && angle < 0.5) {
            txtStyle = `left: -${disX}px`;
            if (disX >= btnWidth) {
                //距离最大值
                txtStyle = `left: -${btnWidth}px`;
            }
        }
        let index = e.currentTarget.dataset.index;
        let list = this.state.positionStyle;
        this.setState({
            positionStyle: list
        });
    }
}

moveTaskEnd(e) {
    let txtStyle;
    if (e.changedTouches.length == 1) {
        let endX = e.changedTouches[0].clientX;
        let moveY = e.changedTouches[0].clientY;
        //移动距离
        let disX = this.state.startX - endX;
        let disY = this.state.startY - moveY;
        //移动角度
        let angle = disY > 0 ? disY / disX : -disY / disX;
        let btnWidth = this.state.btnWidth;
        //如果距离大于按钮宽度的一半，并且移动角度较小，显示按钮
        if(disX > (btnWidth / 2) && angle < 0.5) {
            txtStyle = `left:-${btnWidth}px`
        }else {
            txtStyle = "left:0px"
        }
        let index = e.currentTarget.dataset.index;
        let list = this.state.positionStyle;
        list[index] = txtStyle;
        this.setState({
            positionStyle: list
        });
    }
}

标签：左滑,卡片,txtStyle,程序实现,disY,disX,state,let,按钮
来源： https://blog.csdn.net/wantingtr/article/details/98221401

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。