什么是内置组件

内置组件就是，小程序为我们封装好的组件，开发者可以通过组合这些组件进行快速开发。

常用的内置组件

  • view 组件：相当于 div，块级元素，小程序提供了一些封装好的属性给我们使用例如：hover-xxx
  • text 组件：
  • icon 组件：
  • button 组件：
  • image 组件：
  • scroll-view 组件：

view

官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/view.html

我们这里就是简单的来写一下示例来使用来这些提供的属性即可, 随便讲解一下 view 组件的特性与注意点之类的就可以了。

view 是一个块级元素这一点我们只需要在页面添加两个 view 组件看各自有没有独占即可：

微信小程序-view组件_xml

好了证明了是块级元素之后我们在来看一下这个组件当中的一些属性：

?> hover-class: 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果

index.wxml:

<view hover-class="active">我是 view 组件</view>

index.wxss:

.active{
  color: rgb(221, 22, 22);
}

代码的运行效果我这里不录制了，自行去测试。

?> hover-start-time: 按住后多久出现点击态，单位毫秒

index.wxml:

<view hover-class="active"
      hover-start-time="{{1000}}"
>我是 view 组件</view>

?> hover-stay-time: 手指松开后点击态保留时间，单位毫秒

index.wxml:

<view hover-class="active"
      hover-stay-time="{{3000}}"
>我是 view 组件</view>

?> hover-stop-propagation: 指定是否阻止本节点的祖先节点出现点击态

index.wxml:

<view hover-class="fatherActive">
  我是 father view 组件
  <view hover-class="sonActive"
        hover-stop-propagation="{{true}}"
  >我是 son view 组件</view>
</view>

index.wxss:

.fatherActive{
  color: rgb(221, 22, 22);
}
.sonActive{
  color: rgb(1, 197, 211);
}