微信weui之actionSheet应用

最新推荐文章于 2024-05-02 21:14:54 发布

原创最新推荐文章于 2024-05-02 21:14:54 发布 · 9.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #action #sheet

web开发专栏收录该内容

48 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的弹出框显示与隐藏的交互逻辑。通过定义`showImagesActionSheet`函数来展示包含预览图片及删除图片选项的动作面板，并在用户选择后关闭面板。该方法还包含了对过渡动画的支持。

我是代码

   //设置弹出框弹出事件
    function showImagesActionSheet(index) {
        console.log('showImagesActionSheet in ');
        var mask = $('#mask');
        var weuiActionsheet = $('#weui_actionsheet');
        weuiActionsheet.addClass('weui_actionsheet_toggle');
        mask.show()
            .focus()//加focus是为了触发一次页面的重排(reflow or layout thrashing),使mask的transition动画得以正常触发
            .addClass('weui_fade_toggle').one('click', function () {
            hideActionSheet(weuiActionsheet, mask);
        });
        $('#actionsheet_cancel').one('click', function () {
            hideActionSheet(weuiActionsheet, mask);
        });
        $('.weui_actionsheet_menu .weui_actionsheet_cell').click(function () {
            if ($(this).text().indexOf('预览图片') >= 0 && $scope.acitonSheetAnble) {//预览图片
                console.log('openPhotoSwipe in ');
                $scope.acitonSheetAnble = false;
                openPhotoSwipe();
                console.log('openPhotoSwipe out ');
                //previewImage(index);
            } else {//删除图片
                //index需要加1处理后，再和imageNum进行对比，因为第一张图片的index值 = 0.但是imageNum = 1
                deleteImage(index + 1);
            }
            $('#showActionSheet1').val($(this).text());
            $('#actionsheet_cancel').click();
        })
        mask.unbind('transitionend').unbind('webkitTransitionEnd');

        function hideActionSheet(weuiActionsheet, mask) {
            weuiActionsheet.removeClass('weui_actionsheet_toggle');
            mask.removeClass('weui_fade_toggle');
            mask.on('transitionend', function () {
                mask.hide();
            }).on('webkitTransitionEnd', function () {
                mask.hide();
            })
        }

        console.log('showImagesActionSheet out ');
    }