微信小程序组件学习(详细且简单易懂)

简介:

通过本篇文章我们可以了解到
微信小程序常见组件的作用以及特性

基础常见组件

view

小程序中的view标签和我们web中的div标签很像

我们可以把它理解为小程序中的div标签

<view hover-class="h-class">
点击我试试
</view>

hover-class

属性	默认值	说明
hover-class	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	50	按住后多久出现点击态，单位毫秒
hover-stay-time	400	手指松开后点击态保留时间，单位毫秒

---

text

1. ⽂本标签

2. 只能嵌套text

3. ⻓按⽂字可以复制（只有该标签有这个功能）

4. 可以对空格 回⻋ 进⾏编码

属性	默认值	说明
user-select	false	文本是否可选，该属性会使文本节点显示为 inline-block
space		显示连续空格
decode	false	是否解码

代码样式:

<text selectable="{
    {false}}" decode="{
    {false}}">
   普&nbsp;通
</text>

---

icon

icon图标。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性	必填	说明
type	是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	否	icon的大小
color	否	icon的颜色，同css的color

---

radio

单选项目。

属性	默认值	说明
value		radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value
checked	false	当前是否选中
disabled	false	是否禁用
color	#09BB07	radio的颜色，同css的color

单选样式图:

代码:
js

Page({
   
  onShareAppMessage() {
   
    return {
   
      title: 'radio',
      path: 'page/component/pages/radio/radio'
    }
  },

  data: {
   
    items: [
      {
   value: 'USA', name: '美国'},
      {
   value: 'CHN', name: '中国', checked: 'true'},
      {
   value: 'BRA', name: '巴西'},
      {
   value: 'JPN', name: '日本'},
      {
   value: 'ENG', name: '英国'},
      {
   value: 'FRA', name