微信小程序 | 51,live新课“小程序UI容器组件”的课堂计划

原创 2017年10月06日 19:09:59

零基础前端自学入门:小程序UI容器组件

这是一节以UI布局、容器组件的使用为主题的live,专注于布局与容器这一个点,努力把这一点讲透。这是继4月22日整体入门live“零基础周末学习小程序开发”之后,从小处着眼、细处学习的尝试。

以下是课堂计划:

  1. 最流行的布局之flex布局讲解,附《讲义:flex布局.pdf》分享
  2. flex布局实践,讲解view、scroll-view、swiper、cover-view等组件的使用,附《讲义:小程序容器组件布局实践.pdf》分享,附demo源码分享
  3. 问答:什么是flex布局?
  4. 问答:如何理解flex-wrap的属性值wrap-reverse?
  5. 问答:如何调整侧轴方向上某个子元素的对齐方式,实现琴键按下的效果?
  6. 问答:如何记忆align-items与justify-content谁是主轴谁是副轴?
  7. 问答:如何实现边栏宽度固定,其余部分自由伸展的布局?
  8. 问答:有哪些属性是调整子元素个体行为的?
  9. 问答:flex做为属性值和属性名的不同?
  10. 问答:当flex-direction为row时,justify-content、align-items和align-content各有哪些表现?

会有两篇讲义,有一个独立的随堂demo分享:


以上资料,仅限于参加live的同学下载学习,请勿外传分享。

参加这节课,请戳这里:零基础前端自学入门:小程序UI容器组件

【微信小程序】视图容器-scroll-view组件

本文是参考微信小程序文档来学习的。 官方文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=2016...

(三)微信小程序之容器组件view实现水平和纵向布局

项目中最常用的两种布局方式,水平布局和垂直布局,在微信小程序中实现起来也比较简单。 1.横向水平布局: 实现水平布局,需要四个view容器组件,其中一个是父容器。如下: box1 bo...

微信小程序组件解读和分析:一、view(视图容器 )

view组件说明:     视图容器     跟HTML代码中的DIV一样,可以包裹其他的组件,也可以被包裹在其他的组件内部。用起来比较自由随意,没有固定的结构。 view组件的用法:   示例...

【微信小程序】视图容器-swiper组件

swiper组件有点像android中的ViewPager

微信小程序UI组件 开发框架 实用库 经典demo

UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库Wa-UI ★122 - 针对微信小程序整合的一套UI库wx-charts ★105 - 微信小程序图表工具wema...

微信小程序UI组件、开发框架、实用库...

微信小程序UI组件、开发框架、实用库... UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库Wa-UI ★122 - 针对微信小程序整合的一套...

用微信小程序开店之五——小程序组件1:“视图容器”

第五讲:小程序组件1——“视图容器” 从本节开始,我将逐一为大家介绍微信小程序的基础组件。...

小程序UI与容器组件

目录     1.总结与概述     2.容器组件             2.1 组件容器(view)             2.2 可滚动视图容器(scroll-view)     ...

微信小程序开发跳坑指南(51-100)

接着上次的跳坑指南(1-50): http://blog.csdn.net/qq_38530880/article/details/72844271跳坑《一百》ssl证书相关问题(SSL相关问题请在...

android源码-高仿微信-UI界面程序

  • 2013年09月06日 22:42
  • 3.38MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:微信小程序 | 51,live新课“小程序UI容器组件”的课堂计划
举报原因:
原因补充:

(最多只允许输入30个字)