分享一款基于aui框架的图文发布界面

391 阅读1分钟

本文出自APICloud官方论坛, 感谢论坛版主 川哥哥 的分享。

分享一款基于aui框架的图文发布界面,可以添加多张图可以删除,类似qq空间发布说说,没做服务器后端,只演示前端操作。 需要用到UIMediaScanner模块

部分项目源码:

    <head>
            <meta charset="utf-8">
            <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
            <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
            <link rel="stylesheet" type="text/css" href="../css/aui.css" />
            <style>
                    .sm textarea {
                            color: #979797;
                            height: 6.4rem
                    }
                    .aui-list {
                            border-top: none;
                    }
                    @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
                            .aui-list {
                                    border: none;
                                    background-size: 100% 0px;
                            }
                    }
                    .aui-list .aui-list-item:active {
                            background-color: #FFFFFF;
                    }
                    .imglist {
                            width: 100%;
                            clear: both;
                            margin: 1rem auto;
                    }
                    .imglist img {
                            width: 4rem;
                            height: 4rem;
                    }
                    .add {
                            width: 4rem;
                            height: 4rem;
                            background: url(../res/add.png) no-repeat;
                            background-size: 100% 100%;
                            float: left;
                            margin-right: 1rem;
                    }
                    .addimg {
                            float: left;
                            height: 4rem;
                            width: 4rem;
                            margin-right: 1rem;
                            margin-bottom: 1rem;
                    }
                    .addimg img {
                            width: 4rem;
                            height: 4rem;
                    }
                    .addimg .x img {
                            width: 0.8rem;
                            height: 0.8rem;
                            position: relative;
                            top: -4.4rem;
                            left: -0.5rem;
                    }
                    /*遮罩层*/
                    .mask {
                            width: 100%;
                            height: 100%;
                            background: rgba(0, 0, 0, .5);
                            position: fixed;
                            top: 0;
                            left: 0;
                            z-index: 999;
                            display: none;
                    }
                    .alert {
                            width: 12rem;
                            height: 7.42rem;
                            border-radius: 0.2rem;
                            background: #fff;
                            font-size: 0.75rem;
                            text-align: center;
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            margin-left: -6rem;
                            margin-top: -4.2rem;
                    }
                    .alert p:nth-child(1) {
                            line-height: 5rem;
                            border-bottom: 1px solid #EBEBEB;
                            font-size: 0.9rem;
                    }
                    .alert p:nth-child(2) span {
                            display: inline-block;
                            width: 49%;
                            height: 2.4rem;
                            line-height: 2.4rem;
                            float: left;
                            font-size: 0.8rem;
                    }
                    .cancel {
                            border-right: 1px solid #EBEBEB;
                            color: #00BB3D;
                    }
                    .sure {
                            color: #F60;
                    }