移动端侧滑显示删除按钮（与VUE框架整合）

通过样式找到目标DOM数组，循环绑定滑动事件，通过初始点与当前点判断左右滑动，将每一行内容设置为120%宽度，在滑动后给一个swipeLeft类，利用C3变形相对自己位移15%，露出删除按钮。<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" conte

Maximus_ckp

6131人浏览 · 2017-05-02 15:51:48

Maximus_ckp · 2017-05-02 15:51:48 发布

通过样式找到目标DOM数组，循环绑定滑动事件，
通过初始点与当前点判断左右滑动，
将每一行内容设置为120%宽度，
在滑动后给一个swipeLeft类，
利用C3变形相对自己位移15%，露出删除按钮。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>原生js侧滑显示删除按钮</title>
    <style>
        *{margin:0;padding:0;}
        body{font-size:.14rem;}
        li{list-style:none;}
        i{font-style:normal;}
        a{color:#393939;text-decoration:none;}
        .list{overflow:hidden;margin-top:.2rem;padding-left:.3rem;border-top:1px solid #ddd;}
        .list li{overflow:hidden;width:120%;border-bottom:1px solid #ddd;}
        .list li a{display:block;height:.88rem;line-height:.88rem;-webkit-transition:all 0.3s;transition:all 0.3s;}
        .list li i{float:right;width:15%;text-align:center;background:#E2421B;color:#fff;}
        .swipeleft{transform:translateX(-15%);-webkit-transform:translateX(-15%);}
    </style>
    <script>
        function resizeRoot(){
            var deviceWidth = document.documentElement.clientWidth,                 //计算根节点HTML的字体大小
                num = 750,
                num1 = num / 100;
            if(deviceWidth > num){
                deviceWidth = num;  
            }
            document.documentElement.style.fontSize = deviceWidth / num1 + "px";
        }
        resizeRoot();                                                               //根节点HTML的字体大小初始化
        window.onresize = function(){
            resizeRoot();
        };
    </script>
</head>
<body>
    <div class="list" id="app">
        <ul>
            <li v-for="(item,index) in list">
                <a href="#">{{item.content}}
                    <i @click="del(item.content,index)">删除</i>
                </a>
            </li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            list:[
                {"content":"第一条数据"},
                {"content":"第二条数据"},
                {"content":"第三条数据"},
            ],
            expansion : null,                                                   //是否存在展开的list
        },
        mounted:function(){
            var $this=this;														//将$this保存 区分以下触发事件的this
            var container = document.querySelectorAll('.list li a');
            for(var i = 0; i < container.length; i++){                          //为每个特定DOM元素绑定touchstart touchmove时间监听 判断滑动方向
                var x,  X;
                container[i].addEventListener('touchstart', function(event) {   //记录初始触控点横坐标
                    x = event.changedTouches[0].pageX;
                });
                container[i].addEventListener('touchmove', function(event){
                    X = event.changedTouches[0].pageX;                          //记录当前触控点横坐标
                    if($this.expansion){                                       //判断是否展开，如果展开则收起
                        $this.expansion.className = "";
                    }     
                    if(X - x > 10){                                             //右滑
                        this.className = "";                                    //右滑收起
                    }
                    if(x - X > 10){                                             //左滑
                        this.className = "swipeleft";                           //左滑展开
                        $this.expansion = this;
                    }
                });
            }
        },
        methods:{
            del:function(name,idx){
                alert("确认删除"+name);
                this.list.splice(idx,1);                                        //删除List这条数据 DOM随之更新渲染
                var container = document.querySelector('.swipeleft');           //将展开的DOM归位 除掉样式类
                    container.className="";
                    this.expansion=null;
            }
        }
    });
</script>   
</html>

参考资料:http://www.cnblogs.com/tnnyang/p/6429730.html
感谢前辈的文章参考，我把上下滑动判断去掉了，并且与VUE框架做了整合，
各位记得引vue.js

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^