常用的视图容器类组件
view
普通视图区域,类似于HTML中的div,是一个块级元素常用来实现页面的布局效果。
WXML代码:
scroll-view(滚动)
可滚动的视图区域,常用来实现滚动列表效果。
添加属性 scroll-y,即为纵向滚动。scroll-x,即为横向滚动。
WXML代码:
实现效果
swiper和swiper-item(轮播图)
轮播图容器组件,轮播图item组件
swiper组件的常用属性
WXML代码:
WXSS代码:
实现效果:
常用的基础内容组件
text
文本组件,类似于HTML中的span标签,是一个行内元素。
使用text组件并添加selectable属性
可以实现长按选中的效果。
WXML代码:
rich-text
富文本组件,支持把HTML字符串渲染为WXML结构。
通过rich-text组件的nodes属性
节点,把 HTML字符串渲染为对应的UI结构。
WXML代码:
其他常用组件
button
按钮组件,功能比HTML中的button按钮丰富,通过open-type属性
可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
三种按钮样式
普通按钮/主色调按钮/警告按钮,默认自动换行
小按钮(mini)
设置size="mini"
即可,设置之后不换行
镂空按钮(plain)
去除背景色。添加plain属性
即可。
image
图片组件,image 组件默认宽度约300px、高度约240px
通过src属性
添加图片地址:
下面我们来看看效果:
- scaleToFill
2 aspectFill