当前位置：文江博客话题详情

mui做移动端应用，右上角的三个点如何做出来的？（就是苹果手机右上角的菜单功能图标，点击出现菜单列表）

发布于 2022-09-04 08:29:25 字数 409 浏览 22 评论 0

用mui做应用，右上角这三个点如何做出来呢？mui有没有默认的样式，难道是三个点的文字符号写出来的？右上角三个点点击引发底部弹出选择菜单，这个调用的mui的哪个功能呢？如果还有时间请回答一下还有中间的红色加号怎么做出来的啊？多谢

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦途 2022-09-11 08:29:25

三个点可以做一个图标背景透明即可.
actionsheet调用方法:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Hello MUI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!--标准mui.css-->
        <link rel="stylesheet" href="../css/mui.min.css">
        <!--App自定义的css-->
        <link rel="stylesheet" type="text/css" href="../css/app.css"/>
        <style>
            p {
                text-indent: 22px;
            }
            span.mui-icon {
                font-size: 14px;
                color: #007aff;
                margin-left: -15px;
                padding-right: 10px;
            }
            #info {
                padding: 20px 10px;
            }
            .des {
                margin: .5em 0;
            }
            .des>li {
                font-size: 14px;
                color: #8f8f94;
            }
        </style>
    </head>

    <body>

        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">H5模式actionsheet</h1>
        </header>
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item" href="#delete">
                <span class="mui-icon mui-icon-trash"></span>
            </a>
            <a class="mui-tab-item" href="#">
            </a>
            <a class="mui-tab-item" href="#">
            </a>
            <a class="mui-tab-item" href="#forward">
                <span class="mui-icon mui-icon-undo"></span>
            </a>
        </nav>
        <div class="mui-content">
            <div class="mui-content-padded">
                <p>actionsheet一般从底部弹出，显示一系列可选择的操作按钮，供用户选择； actionSheet可从任意位置触发， 点击本页面左下角
                    <span class="mui-icon mui-icon-trash"></span>会弹出删除信息确认框； 点击本页面右下角
                    <span class="mui-icon mui-icon-undo"></span>会弹出转发确认框； 你也可点击如下按钮，打开照片选择框：
                </p>
                <p>
                    <a href="#picture" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开actionsheet</a>
                </p>
                <p>本页面为H5模式的actionsheet演示示例，该模式具有如下优点：</p>
                <ul class="des">
                    <li>可通过css自由定制展现样式</li>
                </ul>

                <p>另一方面，H5模式的actionsheet也具备如下缺点：</p>
                <ul class="des">
                    <li>不支持覆盖顶部状态栏</li>
                    <li>不支持跨webview的遮罩</li>
                    <li>在有map等原生组件时，容易被遮挡</li>
                </ul>
                <p id="info"></p>
            </div>
        </div>

        <div id="delete" class="mui-popover mui-popover-action mui-popover-bottom">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a href="#" style="color: #FF3B30;">删除信息</a>
                </li>
            </ul>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a href="#delete"><b>取消</b></a>
                </li>
            </ul>
        </div>
        <div id="forward" class="mui-popover mui-popover-action mui-popover-bottom">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a href="#">回复</a>
                </li>
                <li class="mui-table-view-cell">
                    <a href="#">转发</a>
                </li>
                <li class="mui-table-view-cell">
                    <a href="#">打印</a>
                </li>
            </ul>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a href="#forward"><b>取消</b></a>
                </li>
            </ul>
        </div>
        <div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a href="#">拍照或录像</a>
                </li>
                <li class="mui-table-view-cell">
                    <a href="#">选取现有的</a>
                </li>
            </ul>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a href="#picture"><b>取消</b></a>
                </li>
            </ul>
        </div>

    </body>
    <script src="../js/mui.min.js"></script>
    <script>
        mui.init({
            swipeBack:true //启用右滑关闭功能
        });
        mui('body').on('shown', '.mui-popover', function(e) {
            //console.log('shown', e.detail.id);//detail为当前popover元素
        });
        mui('body').on('hidden', '.mui-popover', function(e) {
            //console.log('hidden', e.detail.id);//detail为当前popover元素
        });
        var info = document.getElementById("info");
        mui('body').on('tap', '.mui-popover-action li>a', function() {
            var a = this,
                parent;
            //根据点击按钮，反推当前是哪个actionsheet
            for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
                if (parent.classList.contains('mui-popover-action')) {
                    break;
                }
            }
            //关闭actionsheet
            mui('#' + parent.id).popover('toggle');
            info.innerHTML = "你刚点击了\"" + a.innerHTML + "\"按钮";
        })
    </script>

</html>

传送门:http://dev.dcloud.net.cn/mui/

回复收藏 0

~没有更多了~