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

来源：互联网发布：网络炒作公司价格编辑：程序博客网时间：2024/06/06 03:46

通过样式找到目标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

0 0