VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >
  • weui+vue列表滑动删除

由于移动端的屏幕尺寸限制,很多App都的列表项使用了的滑动显示删除按钮,然后点击删除功能。网页端可以采用插件方式很容易实现。

这里采用Vue+Weui+vue2-touch-events插件实现。

  • Vue是一套用于构建用户界面的渐进式框架。使用起来很容易上手。https://vuejs.bootcss.com/guide/
  • Weui是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,简单易用。https://weui.io/
  • vue2-touch-events是基于Vue2的移动端浏览器Touch事件插件,https://www.npmjs.com/package/vue2-touch-events

我们都知道滑动事件由按下、移动、松开3个步骤组成。要在按下的时候记录手指按下的屏幕位置,并判断是否有已经打开的列表,有的话先关闭;在滑动的过程中,根据当前触摸的坐标计算滑动距离,移动相应的列表,当滑动记录大于完全打开的记录的一半时自动打开列表;当松开时滑动距离小于完全打开的记录的一半时吧列表关闭。效果如下:

很简单,直接贴代码,

HTML代码:

<div class="weui-panel">
    <div class="weui-panel__bd">
        <div class="weui-media-box weui-media-box_small-appmsg">

                <div v-for="record in records" class="weui-cells">
                    <div class="weui-cell  weui-cell_swiped">
                        <div ref="ls" class="weui-cell__bd">
                            <div class="weui-cell" v-touch:start="listSwipeStart()" v-touch:moving="listSwipeMoving()" v-touch:end="listSwipeEnd()">
                                <div class="weui-cell__hd">
                                    <i class="fas fa-folder color-orange"></i>
                                </div>
                                <div class="weui-cell__bd">
                                    {{record}}
                                </div>
                                <div class="weui-cell__ft">
                                </div>
                            </div>
                        </div>

                        <div class="weui-cell__ft">
                            <a class="weui-swiped-btn weui-swiped-btn_orange" href="javascript:">修改</a>
                            <a class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:">删除</a>
                        </div>
                    </div>
                </div>
                <div v-if="records == null || records.length==0" class="weui-cells">
                    <div class="weui-cell weui-cell_active weui-cell_access weui-cell_example">
                        <div class="weui-cell__bd weui-cell_primary" style="text-align:center">
                            <p>无数据!</p>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>

主内容区域是一个weui面板,面板的主体方式weui-cell组件用于显示列表。

由于要显示修改删除按钮,所以嵌套一层weui-cell:外层的weui-cell的bd里嵌套一个weui-cell,里面的weui-cell是列表内容,外层weui-cell的ft里放修改删除按钮,正常时内层的weui-cell遮掉外层的ft,当滑动时移动内层的weui-cell外层的按钮就可显示出来了。

给内层的weui-cell绑定vue2-touch-events插件的3个事件,v-touch:start,v-touch:moving,v-touch:end。

Js代码:

<script>
        const Counter = {
            el: ".page",
            data() {
                return {
                    swipe: {
                        startX: 0,
                        startY:0,
                        maxDistance: 136
                    }

                }
            },
            mounted: function () {
                for (var i = 1; i <= 20; i++) {
                    this.records.push("n" + i);
                }
            },

            methods: {
                listSwipeStart() {
                    that = this;
                    return function (direction, event) {
                        if (direction.changedTouches != undefined && direction.changedTouches.length === 1) {
                            //清楚已打开的列表
                            for (i = 0, len = that.$refs.ls.length; i < len; i++) {
                                if (that.$refs.ls[i].style != "") that.$refs.ls[i].style = "";
                            }
                            //记录起始位置
                            that.swipe.startX = direction.changedTouches[0].pageX;
                            that.swipe.startY = direction.changedTouches[0].pageY;
                        }
                    };
                },
                listSwipeMoving() {
                    that = this;
                    return function (direction, event) {
                        if (direction.changedTouches != undefined && direction.changedTouches.length === 1) {
                            var distanceX = direction.changedTouches[0].pageX - that.swipe.startX;
                            var distanceY = direction.changedTouches[0].pageY - that.swipe.startY;
                            //左滑
                            if (distanceX < 0 && Math.abs(distanceX) > Math.abs(distanceY)) {
                                if (Math.abs(distanceX) < (that.swipe.maxDistance / 2)) direction.path[direction.path.length - 14].style = "transform: translateX(" + distanceX + "px)";
                                else direction.path[direction.path.length - 14].style = "transform: translateX(" + -that.swipe.maxDistance + "px)";
                            }
                        }
                    };
                },
                listSwipeEnd() {
                    that = this;
                    return function (direction, event) {
                        if (direction.changedTouches != undefined && direction.changedTouches.length === 1) {
                            var distanceX = direction.changedTouches[0].pageX - that.swipe.startX;
                            var distanceY = direction.changedTouches[0].pageY - that.swipe.startY;
                            //左滑
                            if (distanceX < 0 && Math.abs(distanceX) > Math.abs(distanceY)) {
                                if (Math.abs(distanceX) < (that.swipe.maxDistance / 2)) direction.path[direction.path.length - 14].style = "";
                                else direction.path[direction.path.length - 14].style = "transform: translateX(" + -that.swipe.maxDistance + "px)";
                            }
                        }
                    };
                },
            }
        };
        var page = new Vue(Counter);
    </script>
作者:洞庭夕照
出处:http://mzwhj.cnblogs.com

相关教程