• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序之UI篇

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

微信提供了以下几类组件:

  • 视图容器
  • 基础内容
  • 表单组件
  • 导航
  • 媒体组件
  • 地图
  • 画布
  • 客服会话

一个个来讲(先留坑,以后开发过程再补充)
1.视图容器
- view

相当于html中的div

scroll-view

可以滚动的视图

swiper

相当于幻灯片

movable-view

2.基础内容
icon
text
process

3.表单组件
button
CheckBox
form
input
label
picker
picker-view
radio
slider
switch
textarea

4.导航
navigator

5.媒体组件
audio
image
video

6.地图
map

7.画布
canvas

8.客服会话
contact-button

布局方式

  • flex布局
  • 相对定位和绝对定位

flex布局

1.flex容器与元素

主轴和交叉轴

flex-direction

元素排列方向,设置主轴

flex-wrap

是否换行

flex-flow

上面两个的简写

justify-content

元素在主轴上对齐方式,左上flex-start,右下flex-end,spacebetween均分

align-items

元素在交叉轴上对齐方式
stretch使未设置高度元素占满整个高度
baseline让元素以文字位置对齐
flex-start/end

flex-grow

有多余空间元素放大比例,默认值是0

flex- shrink

空间不足时元素缩小比例,默认值为1

flex-basis

元素在主轴上占据空间

flex

以上三个的简写

order

元素排列顺序

align-self

定义元素自身对齐方式

相对定位和绝对定位

相对定位的元素是相对自身进行定位,参照物是自己
绝对定位的元素是相对离他最近的一个已定位的父级元素进行定位

样式

  • 尺寸

width,height,min-width…

  • 背景
  • 边框

    border

  • 边距

margin 与外容器的距离
padding 与内容器的距离

  • 文本

font

  • 其他(列表.内容.表格)

样式选择器

  1. 基本选择器
    • 类选择器(.name{}) 对应class
    • ID选择器(#name{}) 对应id
    • 元素选择器(name{}) 对应元素,例如image
    • 通配符选择器(*name{})
    • 包含选择器(p c{})
    • 子元素选择器(p>c{})
    • 邻近兄弟元素选择器(c+c{})
    • 通用兄弟元素选择器(c~c{})
  2. 属性选择器
  3. 伪类选择器

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap