当前位置: 首页 > Web前端 > HTML

WeUI基础样式库-写一个移动界面

时间:2023-04-02 22:38:34 HTML

WeUI是一套基础样式库,符合微信原有的视觉体验,由微信官方设计团队为微信网页和微信小程序设计。让我们来看看这个基本的库样式是什么样子的。这些密密麻麻的就是压缩后的样式库。密密麻麻,一看就是恐慌症。别着急,请往下看。仔细观察可以发现,这个样式库为很多类编写了样式。也就是说,我们只要在html页面中使用这些样式,就可以构建出一个页面。【只写类名,省去很多标签定义样式的需要。是不是简单多了?】WeUI的介绍到此结束,下面干货满满。开始写页面前的准备如果你想拥有这个样式库,当然要先下载WeUI样式库。我提供了两个下载地址。一个是腾讯的GitHub下载地址:https://github.com/weui/weui还有一个是我放在GitHub上的weui.min.css样式:https://raw.githubusercontent...接下来为我们的页面导入这个基本样式库。我把这个基础样式库放在本地,导入就好了。为了更好的说明这个基础样式库的使用,接下来我将介绍两个例子。单页应用程序页面和弹出窗口。单页应用页面我们向vue致敬,模仿这个页面。纵观整个页面,可以分为以下几个模块。顶部徽标中间有两个单元格用于显示数据。底部有一个tabbar导航栏。导入代码:

当前vue版本2.5.2

顶部的图片插入相对很简单,直接导入图片即可。让我们谈谈在中间单元格中添加内容。我们来看一个单元格,是典型的左右格式,分为三个结构层次。左边是一张图片。WeUI样式库给我们定义了类名,也就是cell的header:weui-cell__hd中间是一段文字,就是这个cell的body:weui-cell__bd是最右边的一个小箭头,也就是单元格的结尾:weui-cell__ft导入代码:

现场演示/div>这样,我们就写完了一个cell。如果第二个小区有两个小小区怎么办?没关系,一个weui-cell就是cell中的一个小格子。一个weui-cells嵌套多少个小格子就够了。每个weui-cell还是按照上面的left、middle、right方法命名:span>接下来是底部标签栏。最后导航栏的类名是weui-tabbar,里面有3个item,也就是三个weui-tabbar__items。为每个weui-tabbar__item添加内容吧:首页

8演示

>捐赠

我在GitHub上的项目地址:https://github.com/TeanLee/qs。..这样就完成了第一个单页页面的编写,接下来说一个弹框,页面弹框放的是我们要写的成品页面图片:这是我们常用的弹框。这里是点击第一个按钮弹出弹框,点击取消,弹框就会消失,当然你也可以添加其他事件,点击取消和保存,弹框就会消失,执行相应的步骤。首先我们给dialog弹出框做一个“home”,也就是放置dialog的页面:weui-btn是weui的基本组件是一个按钮对话框对话框

IOSDialogstyle默认IOSDialogstyleprimaryIOS对话框样式警告接下来,我们的对话框就会出现。将对话框div直接放在按钮div的后面。弹窗标题弹窗内容,告知当前状态、信息和解决方案,描述文字尽量控制在三行以内取消保存掩码这里的layer是为整个页面铺上一层灰色的背景,把用户的吸引力吸引到弹框上。弹框内容还是分为三级:weui-dialog__hd:在弹框头部写标题;weui-dialog__bd:将具体内容写在弹框正文中;weui-dialog__ft:将按钮放在弹框的最后;给第一个按钮添加绑定事件,点击第一个按钮弹出弹框。<脚本>document.getElementById('showIOSDialog1').click(function(){$('#iosDialog1').show();});document.getElementById('dialogCancle').click(function(){$('#iosDialog1').show();});弹框的具体代码我放在了GitHub上:https://github.com/TeanLee/qs...当然,weu基础样式库还有很多很多组件可以使用,可以进入https://weui.io/查看更多基础组件。让我们一起学习更多!