微信小程序——组件基础

微信小程序——组件基础

view组件

view组件，是最基础的组件，相当于HTML里的div组件

常用属性

属性	说明
hover-class	按下去可以显示样式类
hover-stop-propagation	防止样式冒泡

swiper组件

swiper组件是滑块视图容器，常用来作为轮播图

常用属性

属性	说明
indicator-dots	是否显示面板指示点
indicator-color	指示点颜色
indicator-active-color	当前选中的指示点颜色
autoplay	自动轮播
interval	轮播时间间隔
circular	衔接滑动
vertical	纵向轮播

scroll-view组件

scroll-view组件，可以设置滑动窗口

常用属性

属性	说明
scroll-x	允许横向滚动
scroll-y	允许纵向滚动
scroll-top	设置纵向滚动条位置（常在多菜单时配合数据绑定，设置为0）
scroll-left	设置横向滚动条位置（常在多菜单时配合数据绑定，设置为0）

text组件

text组件可以设置文本是否可选

常用属性

属性	说明
user-select	文本是否可选，该属性会使文本节点显示为 inline-block
decode	是否解码，常用在带有 时

button组件

button组件可以设置客服聊天

常用属性

属性	说明
open-type	contact设置为客服聊天
type	类型primary绿色，warn红色，default白色

navigator组件

相当于HTML里的a标签，超链接组件

常用属性

属性	说明
url	内部跳转地址
open-type	跳转类型：redirect/relaunch，打开新页面

image组件

常用属性

属性	说明
src	图片路径
mode	模组：widthFix，heightFix
show-menu-by-longpress	显示发送朋友选项