资源:
组件属性
官网详细说明:https://developers.weixin.qq.com/miniprogram/dev/component/
- 标签共同属性
属性名 | 类型 | 描述 | 注解 |
---|---|---|---|
id | String | 组件的唯一标识 | 整个页面唯一 |
class | String | 组件的样式类 | 在对应的 WXSS 中定义的样式类 |
style | String | 组件的内联样式 | 可以动态设置的内联样式 |
hidden | Boolean | 组件是否显示 | 所有组件默认显示 |
data-* | Any | 自定义属性 | 组件上触发的事件时,会发送给事件处理函数 |
bind / catch | EventHandler | 事件 |
组件是否显示
<van-cell
wx:if="{{task.location}}"
value="{{task.location.lagitude}}, {{task.location.longitude}}">
</van-cell>
原生组件
原生组件在WebView这一层的渲染任务是很简单,只需要渲染一个占位元素,之后客户端在这块占位元素之上叠了一层原生界面。因此,原生组件的层级会比所有在WebView层渲染的普通组件要高。
- 常用的几个原生组件
组件名 | 名称 | 是否有context | 描述 |
---|---|---|---|
video | 视频 | 是 | 播放视频 |
map | 地图 | 是 | 展示地图 |
canvas | 画布 | 是 | 提供一个可以自由绘图的区域 |
picker | 弹出式选择器 | 否 | 初始时没有界面,点击时弹出选择器 |
交互比较复杂的原生组件都会提供“context”,用于直接操作组件。以canvas为例,小程序提供了wx.createCanvasContext方法来创建canvas的context。这是一个可以用于操作canvas的对象,对象下提供了很多绘图的方法,如“setFillStyle”方法可以设置填充样式,“fillRect”方法用于绘制矩形
navigator
<navigator url='../addtodo/addtodo'>
<van-icon name="plus" class="plusIcon"/>
</navigator>
交互反馈
hover
// wxml
<button hover-class="hover">hover</button>
// wxss
.hover{
background-color: red;
}
loading
// wxml
<button loading="{{loading}}" bindtap="loading">loading</button>
// js
loading:function(eye){
// 把按钮的loading状态显示出来
this.setData({
loading: true
})
// 接着做耗时的操作
}
模态对话框
wx.showModal({
title: '标题',
content: '告知当前状态,信息和解决方法',
confirmText:'conform',
cancelText:'cacel',
success: function (res) {
if (res.confirm) {
console.log('用户点击主操作')
} else if (res.cancel) {
console.log('用户点击次要操作')
}
}
})
},
Toast
onLoad: function() {
wx.showToast({ // 显示Toast
title: '已发送',
icon: 'success',
duration: 1500
})