- 视图容器
布局容器
<view hover-class=\'bg\'>222</view>
可以添加的属性如下
hover-class 点击展示的类名
hover-stop-propagation 是否阻止冒泡
hover-start-time 点击多久出现hover效果
hover-stay-time 点击取消hover效果持续时间
可滚动容器
<scroll-view style="height: 200rpx;" scroll-y scroll-into-view="aa">
<view style="height: 100rpx;background: red;">111</view>
<view style="height: 100rpx;background: yellow;" id="aa">222</view>
<view style="height: 100rpx;background: black;" >333</view>
</scroll-view>
可用的属性如下
scroll-x 是否允许横向滚动
scroll-top="20" 设置纵向滚动条位置
scroll-left="20" 设置横向滚动条位置
scroll-into-view 指定哪个要显示的子元素的id
scroll-with-animation 设置滚动定位时，是否显示动画
enable-back-to-top 是否，双击回顶部（安卓），单击回顶部（苹果）
bindscrolltoupper 滚动到头部触发事件
bindscrolltolower 滚动到尾部触发事件
bindscroll 滚动时触发事件
upper-threshold="50" 设置scrolltoupper距离顶部触发的距离
lower-threshold 设置scrolltolower距离顶部触发的距离
轮播图组件
imgUrls: [
\'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg\',
\'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg\',
\'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg\'
]
<swiper indicator-dots="true" style="width:300rpx;">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
可用属性如下
indicator-dots 是否显示指示点
indicator-color="rgba(0,0,0,0.1)" 未选中指示点颜色
indicator-active-color="#1aad16" 选中指示点颜色
current=\'1\' 设置当前展示图片的索引
autoplay 是否自动播放
interval=\'1000\' 自动切换时间间隔
duration 设置动画持续时间
circular 是否循环播放图片
vertical 是否纵向轮播
bindchange 图片索引触发事件，event.detail.current获取当前索引
可移动区域
<movable-area style="height: 500rpx;width: 500rpx;background: red;">
<movable-view style="height: 50rpx;width: 50rpx;background: blue;" direction="all">
</movable-view>
</movable-area>
可用属性如下
direction 可移动的方向，属性值有all、vertical、horizontal、none
inertia 滑动是否有惯性，可以设置friction="10" 来设置摩擦系数，控制惯性大小
out-of-bounds 滑块是否可以超过边界，可以设置阻尼系数damping="50"，设置反弹的大小
x="50" 初始x偏移量，阻尼系数也可以用于手动设置x,y的过渡动画
y="50" 初始y偏移量
覆盖于原生组件之上的容器，map、video、canvas、camera
<video>
<cover-view>
<cover-viewbindtap="play">
<cover-image src="../../images/t1.jpg" />
</cover-view>
<cover-view>00:00</cover-view>
</cover-view>
</video>
- 基础内容
内置图标 <icon type="success" size="25" color="green"></icon>
可用属性如下
type 设置icon的类型，success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size 设置icon的大小
color 设置icon的颜色
文本组件 <text selectable=\'true\' decode=\'true\'>11 1</text>
可用属性如下
selectable 文字是否可选择
decode 是否可以解码 < > & '    特殊字符
富文本组件
<rich-text nodes="{{nodes}}"></rich-text>
nodes: [{
name: \'div\', // 标签名
attrs: { // 标签的属性
class: \'div_class\',
style: \'line-height: 60px; color: red;\'
},
children: [{ // 子节点
type: \'text\', // 文本类型
text: \'Hello World!\'
}]
}]
设置进度条 <progress percent="20" show-info style="width: 400rpx;"/>
可用属性如下
percent 百分比
show-info 是否显示文字百分比
stroke-width="20" 设置进度条的高度
activeColor="red" 设置已读进度条的颜色
backgroundColor="black" 设置未读进度条的颜色
active 是否显示进度条动画
active-mode="forwards" 动画从头播backwards，动画从上次结束点接着播forwards
- 表单组件
按钮组件 <button type="primary" size="mini"> 222 </button>
可用属性如下
type 指定按钮的类型 primary default warn
size 设置按钮大小 default mini
plain 去掉按钮背景色
disabled 按钮禁用
loading 是否展示loading动画
hover-class 点击态类
hover-stop-propagation 点击态是否冒泡
hover-start-time 点击态开始时间
hover-stay-time 点击态持续时间
form-type 配合form表单组件使用，submit reset
open-type 打开微信的开放功能
contact 打开客服对话窗口
contact还可以配合如下属性使用
show-message-card 是否开启分享卡片
send-message-title 设置分享卡片的标题
send-message-path 分享卡片的路径
send-message-img 分享卡片的封面图片
bindcontact 用户打开会话的回调
share 打开分享界面
getUserInfo 获取用户信息，对应的绑定事件是 bindgetuserinfo
<button type="primary" open-type="getUserInfo" bindgetuserinfo=\'myFn\'>3</button>
myFn: function(obj) {}
还可以设置lang属性，控制用户信息的语言 zh_CN zh_TW en
getPhoneNumber 获取用户手机号，对应的绑定事件是 bindgetphonenumber
复选框组件
<checkbox-group bindchange="myFn">
<label> <checkbox value="男"/> 男 </label>
<label> <checkbox value="女"/> 女 </label>
</checkbox-group>
checkbox-group可用属性如下
bindchange 绑定选择回调
checkbox可用属性如下
value 设置复选框值
disabled 是否禁用
checked 是否选中
color 设置复选框选中的颜色
表单提交组件
<form bindsubmit=\'myFn\' bindreset=\'myFn1\'>
<checkbox-group name="cbox">
<label> <checkbox value="男"/> 男 </label>
<label> <checkbox value="女"/> 女 </label>
</checkbox-group>
<view>
<button form-type=\'submit\'>提交</button>
<button form-type=\'reset\'>重置</button>
</view>
</form>
每一个表单组件都需要使用name属性，作为提交的字段名
表单输入组件
<input placeholder=\'请输入...\'></input>
可用属性如下
value 设置表单的值
type 输入框的类型 text number idcard digit
password 是否密码框
placeholder 占位符
placeholder-style 占位符样式
placeholder-class 占位符类
disabled 是否禁用
maxlength 最大输入长度
focus 自动聚焦
配合cursor可以设置光标位置
confirm-type 设置键盘右下角按钮 send search next go done
confirm-hold 点击右下角按钮是否是否收起键盘
bindinput 用户输入事件
bindfocus 用户聚焦事件
bindblur 用户失去焦点事件
bindconfirm 点击右下角按钮事件
label控件，和一般的html写法一样
<label for="id">聚焦</label>
<input id="id" placeholder=\'请输入...\'></input>
选择器控件 <picker range=\'{{[1,2,3,4,5]}}\'>选择器</picker>
可用属性如下
mode 设置选择器类型
selector 默认的普通选择器
range 设置选择的item
value="2" 设置选中的item索引
disabled 是否禁用
bindchange 改变事件
multiSelector 多选选择器
<picker mode="multiSelector" range=\'{{[[1,2,3,4,5], [1,2,3,4,5]]}}\' value="{{[1,2]}}">选择器</picker>
属性同上，不过多了一个bindcolumnchange，单个列值改变触发
time 事件选择器
<picker mode = "time" value="12: 00">选择器</picker>
value 设置时间值
bindchange 改变事件
disabled 是否禁用
date 日期选择器
<picker mode = "date" value="2017-06-01\'\'">选择器</picker>
fields="year" 只显示指定的日期部分 year month day
region 省市级联选择器
<picker mode = "region" value="{{[\'湖北省\', \'武汉市\', \'武昌区\']}}">选择器</picker>
custom-item="全部" 添加额外项
自定义选择器
<view style="width: 100%; height: 300px;">
<picker-view style="width: 100%; height: 100%;" value="{{[0,1,2]}}">
<picker-view-column>
<view>11</view>
<view>22</view>
<view>33</view>
</picker-view-column>
<picker-view-column>
<view>11</view>
<view>22</view>
<view>33</view>
</picker-view-column>
<picker-view-column>
<view>11</view>
<view>22</view>
<view>33</view>
</picker-view-column>
</picker-view>
</view>
picker-view可用属性如下
value 设置item索引值
indicator-style 设置选择器样式
indicator-class 样式类名
mask-style 遮罩层样式
mask-class 遮罩层类名
bindchange 改变事件
picker-view-column 只是选择器列的容器
单选组件
<radio-group>
<label> <radio value="男" /> 男 </label>
<label> <radio value="女" /> 女 </label>
</radio-group>
radio-group可用属性
bindchange
radio可用属性
value 设置单选框值
checked 是否选中
disabled 是否禁用
color 选中颜色
滑动条选择器
<slider step=\'1\'></slider>
可用属性如下
min 设置最小值
max 设置最大值
step 滑动步长 （要求能被max-min整除）
disabled 是否禁用
value 设置初始值
backgroundColor 选择条的背景颜色
activeColor 选择条选中部分的颜色
show-value 是否显示选中的值
bindchange 拖动，手松开是触发
bindchanging 拖动，手不松开一直触发
切换按钮组件 <switch></switch>
可用属性如下
checked 是否选中
type 组件类型，默认switch，可以设置成checkbox复选框
bindchange 改变事件
color 选中的颜色
文本域组件 <textarea style="border: 1px solid #ccc;"></textarea>
可用属性如下
value 文本框值
placeholder 占位符
placeholder-style 占位符样式
placeholder-class 占位符类
disabled 是否禁用
maxlength 最大输入长度
auto-focus 聚焦
auto-height 自动增高
fixed 父元素是fixed，需要设置此属性
cursor 设置光标的位置
show-confirm-bar 是否显示键盘完成栏
bindfocus 聚焦时触发
bindblur 失去焦点触发
bindlinechange 输入框换行触发
bindinput 输入时触发
bindconfirm 点击完成触发
- 导航组件
页面跳转组件 <navigator url="/pages/logs/logs" >跳转到新页面</navigator>
可用属性如下
url 设置跳转链接
open-type 设置跳转方式
navigate 跳转指定页面（非tabbar页）
redirect 跳转指定页面（非tabbar页，并且销毁当前页）
switchTab 跳转到tabbar页
reLaunch 销毁所有页面，跳转到任意指定页
navigateBack 后退，配合delta属性，设置回退层数
hover-class 点击类
hover-stop-propagation 点击态是否冒泡
hover-start-time 点击态开始出现时长
hover-stay-time 点击结束点击态持续时间
- 媒体组件
播放音乐组件 <audio controls src="/刘若英 - 念念.mp3"></audio>
可用属性如下
id 设置组件id
src 音乐文件路径
loop 是否循环播放
controls 是否显示默认控件
poster 封面图片
name 音乐名字
author 音乐作者
binderror 发生错误触发事件
bindplay 开始播放触发
bindpause 暂停播放触发
bindtimeupdate 播放进度改变触发
bindended 播放结束触发
图片组件 <image style="width: 500rpx; height: 500rpx; background-color: #eeeeee;"src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"></image>
可用属性如下
src 图片路径
mode 图片模式，所有的模式如下
scaleToFill 默认值，拉伸图片占满image元素
aspectFit 保持图片原始比例
aspectFill 保持原始比例，显示一部分
widthFix 原始比不变，宽度固定，高度自适应
top 保持图片原始大小，只显示头部
bottom, center, left, right, top left, top right, bottom left, bottom right
视频组件 <video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls></video>
可用属性如下
src 视频网址
initial-time="100" 设置初始播放位置，单位秒
duration 设置视频时长，单位秒
controls 是否显示默认播放控件
enable-danmu 是否开启弹幕
danmu-btn 是否开启控制弹幕的按钮
danmu-list 设置弹幕列表信息，写法如下
[
{
text: \'第 1s 出现的弹幕\',
color: \'#ff0000\',
time: 1
},
{
text: \'第 3s 出现的弹幕\',
color: \'#ff00ff\',
time: 3
}
]
autoplay 是否自动播放
loop 是否循环播放
muted 是否静音播放
page-gesture 是否在非全屏模式下开启亮度和音量调节
direction 设置视频全屏的方向，0 代表竖向，90 代表横向
bindplay 播放时触发的事件
bindpause 暂停时触发的事件
bindended 视频播放完成触发的事件
bindtimeupdate 播放进度变化时触发事件
bindfullscreenchange 视频切换全屏时触发
objectFit 视频自适应的规则 contain：包含，fill：填充，cover：覆盖
poster 视频的封面图片
照相机组件 <camera device-position=\'back\' falsh="off" style="width: 100%; height: 300px;"></camera>
可用属性如下
device-position 使用前置还是后置摄像头 front back
flash 闪光灯设置 auto, on, off
bindstop 摄像头意外关闭触发
binderror 用户禁止摄像头触发
- 地图组件
地图控件 <map longitude="113.324520" latitude="23.099994" show-location style="width: 100%; height: 300px;"></map>
相关属性如下
longitude 设置经度
latitude 设置纬度
scale 初始缩放级别 5~18 默认是16
include-points 当前实体要包含的点，数组
show-location 定位点是否带方向
bindmarkertap 标记点被点击触发
bindcallouttap 点击标记点提示框触发
bindcontroltap 点击自定义控件触发
bindregionchange 地图移动触发
bindtap 点击地图触发
bindupdated 地图loaded触发
controls 地图固定自定义控件，写法如下
[{
id: \'map\',
position: { 控件的位置
left: 0,
top: 300 - 50,
width: 50,
height: 50
},
iconPath: \'/images/t1.jpg\', 控件的图片
clickable: true 是否可点击
}]
markers 地图标记点，写法如下
[{
id: 0, // 标记点id
latitude: 23.099994, // 标记点坐标
longitude: 113.324520,
title: \'测试\', // 标记点的标题
iconPath: \'...\', // 标记点图片
rotate: 90, // 标记点旋转角度
alpha: 0.5, // 标记点透明度
width: 50, // 标记点宽度
height: 50, // 标记点高度
callout: ... // 自定义标记点提示框
传递对象，可选属性如下
content 显示的文本
color 文本的颜色
fontSize 文本字体大小
borderRadius 边框圆角
bgColor 背景颜色
padding: \'30\' 文本周围空隙
textAlign 文本对齐方式
display 设置提示框的显示形式 \'BYCLICK\' 点击后显示，\'ALWAYS\': 一直显示
label: ... 设置标记点下方说明
传递对象，可用属性如下
content 文本
color 字体颜色
fontSize 字体大小
x 设置点偏移量
y
borderWidth 边框宽度
borderColor 边框颜色
borderRadius 边框圆角
bgColor 背景颜色
padding 文本周围空隙
textAlign 文本对齐方式
}]
polyline 画线，写法如下
[{
points: [{ 设置坐标点
longitude: 113.3245211,
latitude: 23.10229
}],
color: "#FF0000DD", 设置线的颜色
width: 线的宽度
dottedLine 是否虚线
arrowLine 是否有箭头
arrowIconPath 箭头图片路径
borderColor 边框颜色
borderWidth 边框宽度
}]
circles 画圆，写法如下
[{
longitude: 113.3245211, 圆中心坐标
latitude: 23.10229,
color: "#FF0000DD", 圆边框的颜色
fillColor: "#000000AA", 圆填充颜色
radius: 100, 圆半径
strokeWidth: 5 圆边框宽度
}]
请发表评论