小程序基础组件库
小程序中wxml文件由各式各样的组件构成,这些组件都是微信自定义的。其他html的标签无法使用。
1. 关于组件属性:
- 对于
布尔类型属性
,无论直接设置为true和false,都会当做普通字符串来进行判断,最终被解释为true;除非用非空字符串“”。推荐使用{{}}
引用js的字面量,为属性赋值为true或flase。比如:hover-stop-propagation="{{true}}"
- 小程序组件既遵守驼峰命名法,也遵守短横线命名法,两种属性名的设置都将会生效。
2. <view>
组件
<view>
组件为视图容器组件:
- 基本语法
<view
hover-class=”点击view所应用的样式类名”
hover-start-time="点击view后多久出现点击状态"
hover-stay-time="点击状态持续多久"
hover-stop-propagation=”是否阻止冒泡” “{{true/false}}”
>
</view>
3. <image>
组件
Image组件为图片组件,支持GIF、JPG、PNG、WEBP等图像格式
- 基本语法:
<image
scr=”图片路径”
lazy-load=”是否采用懒加载”
mode=”图像裁切模式” //14种 // aspectFill 默认
show-menu-by-longpress=”是否支持长按弹出操作菜单”
>
</image><image />
注意:
images
组件默认宽高为320*240
。可以通过wxss或style
内联样式修改图片的宽和高,单位是px
。wxss
提供了一个新的尺寸单位rpx
来完善小程序组件在不同平台下的适配工作
4. <swiper>
组件
swiper为轮播图组件
- 基本语法:
<swiper
autoplay="{{true}}"
indicator-dots="{{true}}"
indicator-active-color="#0f0"
>
<swiper-item>
<image src=”xx.jpg”></image>
</swipeer-item>
</swiper>
5. <text>
组件
文本组件
- 基本语法:
<text
user-select=”内容文本是否可选中”
decode=”是否支持内容解码”
space=”空格的渲染方式”
>
</text>
6. navigator
组件
navigator
是页面链接组件,用于控制页面的跳转
- 基本语法:
<navigator
url=”当前小程序的页面地址”
open-type=”跳转方式”
>
链接文本
</navigator>
open-type
- 跳转方式的可选项包含:
navigate
、navigateBack
、switchTab
、redirect
、reLaunch
1. navigate
- 默认的跳转方式。可以从当前页跳转到
非tabber页面
。跳转的过程会保留当前页,新建目标页(tabber不用新建),而后执行跳转操作。称为“保留跳转
”。(最深10层)
2. navigateBack
- 返回上一级页面。这种操作将会销毁当前页从而显示上一页。可以配合
delta
属性实现上n实现
。(delta=”2”
返回上两页)
3. switchTab
- 字面理解:切换到
某个选项卡
。这种方式可以跳转tabbar页面
。但是关闭所有非tabbar页面
。
4. redirect
- 字面理解:
重定向
。这次跳转方式将会销毁当前页,重定向到非tabber页面。这种跳转也会创建新的目标页。
5. relaunch
- 字面理解:重新启动应用。这种跳转方式会关闭所有页面,跳转到指定页面。
7. <scroll-view>
组件
scroll-view组件用于实现滚动的视图容器(支持水平和垂直滚动)
- 基本用法
<scroll-view
scroll-x=”是否允许横向滚动”
scroll-y=”是否允许纵向滚动”
enhanced="{{true}}"
enable-flex="{{true}}"
showScrollbar="{{false}}"
>
</scroll-view>
8. <input>
组件
Input组件为输入框组件
- 基本语法
<input
type=”输入框类型”
placeholder=”占位符内容”
value=”文本框中初始值”
password=”是否是密码框”
maxlength=”最大长度”
focus=”是否让文本框自动获取焦点”
bindinput=”input事件处理函数函数名”
bindfocus=”focus事件处理函数函数名”
bindblur=” blur事件处理函数函数名”
>
</input>
type可选值:
text
、number
、idcard(身份证)
、digit(带小数点)
input组件
中提供了一些事件处理(EventHandle
)属性,这些属性用于为当前组件绑定事件处理函数
。在属性中填写事件处理函数的名字
即可。(注意:严禁出现小括号)
<input bindinput=”doInput”>
- 一旦触发了input事件,将会调用page.js中定义的doInput方法来处理该事件。
doInput方法
中也将会自动传入event事件对象
,用于封装事件相关的参数信息
page({
data:{},
doInput(event){
//event.detail.value
}
})
9. <radio-group>
组件
radio-group组件为单选框组组件
- 基本语法:
<radio-group bindchange=””>
<radio value=”M” checked color=”颜色”>男</radio>
<radio value=”F” color=”#颜色”>女</radio>
</radio-group>
10. checkbox-group
组件
<checkbox-group>
为多选框组件:
- 基本语法:
<radio-group bindchange=””>
<radio value=”M” checked color=”颜色”></radio>
<radio value=”F” color=”#颜色”>女</radio>
</radio-group>
11. <switch>
组件
<switch>
组件表示开关组件
- 基本语法:
<switch
color=””
checked
></switch>
12 <picker>
組件
<picker
mode="region | date | time | selector "
bindchange="changeRegion"
>
13 <button>
组件
<button
size=”按钮大小:default | mini”
type=”按钮类型:primary | default | warn”
disabled
palin
loading
>
</button>