欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

【有效果图】微信小程序 简单DEMO布局

发布时间:2017:09:24 09:03:22 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有474个文字,预计阅读时间2分钟
导语
这篇文章主要是介绍微信小程序 简单DEMO布局,并附实例代码和实现效果图,需要了解的朋友可以参考下微信小程序 布局实例:下面将会按照以下的顺序介绍:布局的实现逻辑的实现样

这篇文章主要是介绍微信小程序 简单DEMO布局,并附实例代码和实现效果图,需要了解的朋友可以参考下

微信小程序 布局实例:

下面将会按照以下的顺序介绍:

布局的实现

逻辑的实现

推荐阅读:你会为自己写什么样的小程序?

样式的实现

1.布局的实现

最大的布局是view,, view布局中包含了:一张图片,文字描述,信息栏和分界线

【有效果图】微信小程序 简单DEMO布局

2.逻辑的实现

只是注册了Page界面

【有效果图】微信小程序 简单DEMO布局

3.样式的实现

.home-view1样式:display规定最大View布局为弹性布局,justify-content规定内容居中,竖直排列, …

.home-view3样式:display规定了信息栏布局为弹性布局,justify-content规定内容水平平均分配

.home-view4样式:display规定了收藏图片和收藏数的父布局为弹性布局,align-items规定内容在竖直方向居中

.home-image1样式:规定图片的高度

.home-image-heart样式:规定收藏图片的大小

.home-text1样式:规定描述文字的样式,text-align规定文字居中,line-height规定两行文字之间的高度

.home-text-heart样式:规定收藏数的样式,border-radius规定边界圆角

.home-view-line样式:是一条分界线

.bgColor样式:规定收藏数的背景

【有效果图】微信小程序 简单DEMO布局

【有效果图】微信小程序 简单DEMO布局

4.效果图

【有效果图】微信小程序 简单DEMO布局

感谢阅读,希望能帮助到大家,更多精彩内容,请点击【汇总篇】微信小程序ui布局常用技巧了解更多。

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:网站设计之网页视觉设计规范

下一篇:移动UI设计切图规范原则

  • 18899 文章总数
  • 2333283访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信