本来在看vue。js没多久,最近在赶一个项目用回了angular2,还是先把喜欢的《忍者外传2》搞定吧,毕竟还不怎么懂。这两天我做的是用户表单数据的提交,大部分很简单、双向绑定就完事了,主要还是沟通的问题哈哈哈哈,虽然沟通的时候有点暴躁想甩锅,不过出了门还是高高兴兴吃饭高高兴兴回去。
好了切入问题。这几天做得最久的是仿照微信界面做的图片上传/显示缩略图/预览/删除功能,要求图片1——9张。下面来记录下如何实现微信的图片预览/删除功能。
<强>样式——weui.css
样式用的是微信官方ui, weui.min。css(生产环境下建议使用此压缩版)。
下载地址weui.css/weui.min。css。
<强>样例——weui.io
微信官方自带了演示:weui。io。
<强>主要步骤
在正式进入各个小功能的解说前,先上官方演示→weui。io查看图片上传组件的样式以及源代码。
官方ui显示如下,图片上传的ui在上传中。
图片上传的源码从审查元素中可获取,如下所示:
& lt; div类=币趁嫔洗玧s_show”比;
& lt; div类=皃age__hd”比;
& lt; h2类=" page__title "祝辞Uploader
& lt; p class=" page__desc”在上传组件,一般配合& lt;一个类=傲唇印県ref=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”祝辞组件Gallery
& lt; div类=皃age__bd”比;
& lt; div类=" weui-gallery " id=盎取北?
& lt;跨类=" weui-gallery__img " id=" galleryImg祝辞& lt;/span>
& lt; div类=皐eui-gallery__opr”比;
& lt; a href=" javascript:“rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel==皐eui-gallery__del”比“外部nofollow”类;
& lt;我class=" weui-icon-delete weui-icon_gallery-delete”祝辞& lt;/i>
& lt;/比;
& lt;/div>
& lt;/div>
& lt; div class=" weui-cells weui-cells_form”比;
& lt; div类=皐eui-cell”比;
& lt; div类=皐eui-cell__bd”比;
& lt; div类=皐eui-uploader”比;
& lt; div类=皐eui-uploader__hd”比;
& lt; p class=" weui-uploader__title”在图片上传& lt;/p比;
& lt; div类=" weui-uploader__info "祝辞0/2
& lt;/div>
& lt; div类=皐eui-uploader__bd”比;
& lt; ul类=" weui-uploader__files " id=皍ploaderFiles”比;
& lt;李类=" weui-uploader__file "祝辞& lt;/li>
& lt;李类=" weui-uploader__file "祝辞& lt;/li>
& lt;李类=" weui-uploader__file "祝辞& lt;/li>
& lt;李class=" weui-uploader__file weui-uploader__file_status”比;
& lt; div类=皐eui-uploader__file-content”比;
& lt;我类=" weui-icon-warn "祝辞& lt;/i>
& lt;/div>
& lt;/li>
& lt;李class=" weui-uploader__file weui-uploader__file_status”比;
& lt; div类=" weui-uploader__file-content "祝辞50% & lt;/div>
& lt;/li>
& lt;/ul>
& lt; div类=皐eui-uploader__input-box”比;
& lt;输入id=皍ploaderInput”类=皐eui-uploader__input”类型=拔募苯邮?巴枷?*”多个=薄氨?
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt; div class=" page__ft j_bottom”比;
& lt; a href=" javascript:回家()”rel=巴獠縩ofollow”祝辞& lt;img src=" https://www.yisu.com/zixun/images/icon_footer_link.png "祝辞& lt;/比;
& lt;/div>
& lt;/div>
之前
