view 组件是一个视图容器组件,类似于网页中的div
hover-class :指定按下去的样式类
hover-start-time:按住后多久出现点击态,单位毫秒
<view hover-class="hover" hover-start-time="2000">组件view的hover-class属性</view>
text 文本组件
user-select:该属性代表文本是否可选(长按文本) 默认false
decode:该属性代表的文本内容的特殊符号是否解码默认false
<text user-select="true" decode="true">>text组件,\n是否可选<</text>
image 图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式
src 属性 图片的引入地址属性
mode 常用值
scaleToFill | 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 | |
---|---|---|
aspectFit | 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 | |
aspectFill | 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 | |
widthFix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 |
注意:
- image组件默认的图片大小是宽320px ,高是240px。
- 程序发布不允许超过2m,不建议图片本地化,要求使用网络地址。推荐一个图床网址 https://imgurl.org/ 将本地图片上传到网络。
- aspectFit 这里的长边不是我们设定值的大小决定的(值大的不一定是长边),长边是谁先缩放到设定的值,谁是长边。
- aspectFill 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
button
常用属性列表
size | string | default | 否 | 按钮的大小 | 1.0.0 |
type | string | default | 否 | 按钮的样式类型 | 1.0.0 |
plain | boolean | false | 否 | 按钮是否镂空,背景色透明 | 1.0.0 |
disabled | boolean | false | 否 | 是否禁用 | 1.0.0 |
loading | boolean | false | 否 | 名称前是否带 loading 图标 | 1.0.0 |
open-type | string | 否 | 微信开放能力 |
open-type 常用属性值
contact | 打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息,具体说明 | 1.1.0 |
---|---|---|
share | 触发用户转发,使用前建议先阅读使用指引 | 1.2.0 |
getPhoneNumber | 获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息 | 1.2.0 |
getUserInfo | 获取用户信息,可以从bindgetuserinfo回调中获取到用户信息 | 1.3.0 |
launchApp | 打开APP,可以通过app-parameter属性设定向APP传的参数 | 1.9.5 |
openSetting | 打开授权设置页 | 2.0.7 |
feedback | 打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 |
注:share 只能转发好友或者群聊 不能转发朋友圈
注:openSetting 查看权限 只能查看询问过的权限
示例
<button
size="default"
type="primary"
plain=""
disabled=""
loading="true"
>加载按钮</button>
<button
type="warn"
open-type="contact"
bindcontact="handleContact"
>contact客服会话</button>
<button
type="primary"
open-type="share"
>share转发不能发朋友圈</button>
<button
type="primary"
size="mini"
open-type="getPhoneNumber"
bindgetphonenumber="getphonenumber"
>getPhoneNumber获取手机号</button>
<button
type="primary"
open-type="getUserInfo"
bindgetuserinfo = "getUserInfo"
>getUserInfo用户信息</button>
<button
type="primary"
open-type="openSetting"
>openSetting授权设置</button>
checkbox
注:checkbox 必须结合checkbox-group组件使用
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
value | string | 否 | checkbox标识,选中时触发checkbox-group的 change 事件,并携带 checkbox的 value | 1.0.0 | |
disabled | boolean | false | 否 | 是否禁用 | 1.0.0 |
checked | boolean | false | 否 | 当前是否选中,可用来设置默认选中 | 1.0.0 |
color | string | #09BB07 | 否 | checkbox的颜色,同css的color | 1.0.0 |
<checkbox-group bindchange="changeCheckbox">
<checkbox value="bj" color="#784515">北京</checkbox>
<checkbox value="sh">上海</checkbox>
<checkbox value="sz">深圳</checkbox>
</checkbox-group>
changeCheckbox:function(e){
console.log(e)
}
radio
注:radio组件必须结合radio-group组件使用
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
value | string | 否 | radio 标识。当该radio 选中时,radio-group 的 change 事件会携带radio的value | 1.0.0 | |
checked | boolean | false | 否 | 当前是否选中 | 1.0.0 |
disabled | boolean | false | 否 | 是否禁用 | 1.0.0 |
color | string | #09BB07 | 否 | radio的颜色,同css的color | 1.0.0 |
<radio-group bindchange="radioChange">
<radio value="nan">男</radio>
<radio value="nv">女</radio>
</radio-group>
radioChange:function(res){
console.log(res)
}
swiper
注:滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
indicator-dots | boolean | false | 否 | 是否显示面板指示点 | 1.0.0 |
indicator-color | color | rgba(0, 0, 0, .3) | 否 | 指示点颜色 | 1.1.0 |
indicator-active-color | color | #000000 | 否 | 当前选中的指示点颜色 | 1.1.0 |
autoplay | boolean | false | 否 | 是否自动切换 | 1.0.0 |
current | number | 0 | 否 | 当前所在滑块的 index | 1.0.0 |
interval | number | 5000 | 否 | 自动切换时间间隔 | 1.0.0 |
duration | number | 500 | 否 | 滑动动画时长 | 1.0.0 |
circular | boolean | false | 否 | 是否采用衔接滑动 | 1.0.0 |
vertical | boolean | false | 否 | 滑动方向是否为纵向 | 1.0.0 |
previous-margin | string | "0px" | 否 | 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值 | 1.9.0 |
next-margin | string | "0px" | 否 | 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值 | 1.9.0 |
snap-to-edge | boolean | "false" | 否 | 当 swiper-item 的个数大于等于 2,关闭 circular 并且开启 previous-margin 或 next-margin 的时候,可以指定这个边距是否应用到第一个、最后一个元素 | 2.12.1 |
display-multiple-items | number | 1 | 否 | 同时显示的滑块数量 | 1.9.0 |
easing-function | string | "default" | 否 | 指定 swiper 切换缓动动画类型 | 2.6.5 |
bindchange | eventhandle | 否 | current 改变时会触发 change 事件,event.detail = {current, source} | 1.0.0 | |
bindtransition | eventhandle | 否 | swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy} |
<swiper
indicator-dots="true"
indicator-color="orange"
indicator-active-color="white"
autoplay="false"
current="2"
interval="3000"
duration="500"
circular="true"
previous-margin="20px"
next-margin="20px"
snap-to-edge="true"
display-multiple-items="1"
bindchange="swiperChange"
bindtransition='bindtransition'
>
<swiper-item>
<image src="https://ftp.bmp.ovh/imgs/2021/03/89e52ad717008760.jpg" alt=""></image>
</swiper-item>
<swiper-item>
<image src="https://ftp.bmp.ovh/imgs/2021/03/b09da3334f650bed.jpg" alt=""></image>
</swiper-item>
<swiper-item>
<image src="https://ftp.bmp.ovh/imgs/2021/03/f2b5f2af5c824216.jpg" alt=""></image>
</swiper-item>
<swiper-item>
<image src="https://ftp.bmp.ovh/imgs/2021/03/14e10e003886bac1.jpg" alt=""></image>
</swiper-item>
</swiper>