小程序 view

小程序的基础容器组件，类似于 html5 中的 div 标签，是为容纳其它组件而存在的。view 最主要功能是布局，但也可以有自己的样式。

view 的属性

1、hover_class

指定按下去的样式类，让容器有一个单击效果，默认为 none，没有单击效果。

//wxml
<view hover-class="bc_red">content</view>

//wxss
.bc_red {
  background-color: red;
}

hover-class 设置背景色为红色，这样单击时 view 呈现红色。

2、hover-stop-propagation

阻止父节点出现 hover 状态，boolean 类型，默认 false。

//wxml
  <view hover-class="bc_green">
    parent
    <view hover-stop-propagation hover-class="bc_red">child</view>
  </view>

//wxss
.bc_green {
  background-color: green;
  width: 100px;
  height: 200px;
}

.bc_red {
  background-color: red;
  width: 100px;
  height: 200px;
}

//js
onTap(e){
  console.log(e.target)
}

child view 的 hover-stop-propagation 属性为true，则点击 child view 只有红色；hover-stop-propagation 属性为 false，则点击 child view ，parent view 的绿色和 child view 的红色都显示。

为什么点击 parent view 时，控制台输出一条语句，但点击 child view 时，控制台却输出两条语句？

这是因为 hover-stop-propagation 属性只是阻止了父组件出现 hover-class 样式，但是不能阻止冒泡事件向上传递。

bind和catch作用相同，与bind不同的是，catch会阻止事件向上冒泡，catch是在事件的捕捉阶段监听事件的。阻止事件冒泡需要将 bindtap 改为 catchtap，这样点击 child view 时控制台只会输出一条语句。

3、hover-start-time 和 hover-stay-time

• hover-start-time：手指按住之后，多久出现单击态，默认 50 毫秒。当 touchstart 事件发生时开始计时，到达 hover-start-time 时应用 hover-class 样式。
• hover-stay-time：手指松开后，单击态保留多久，默认 400 毫秒。当 touchstart 事件结束，即touchend事件发生时，开始hover-stay-time倒计时，倒计时时间到则移除hover-class样式。

单位都是毫秒，没有特殊说明的话微信小程序中的所有单位都是毫秒。

小程序相对于 html5 的体验优势

小程序相比 html5 网页在交互上有一个不可忽略的优势，那就是小程序中的单击事件没有 300 毫秒延迟，而在 html5 网页上单击链接或者按钮，会明显感觉到一个卡顿（当延迟超过 100 毫秒的时候，用户就会感觉到界面有明显的卡顿。）。

这是因为苹果创始人乔布斯在 2007 年 iphone 发布会上演示过这样一个功能，对于一个 Safari 的浏览器网页，在内容区快速双击，苹果会帮助我们快速定位到文章的主体内容，并将其放大。

这样功能的代价是，当用户点击到了一个连接时，软件如何处理？是马上跳转呢还是等待用户的下一次点击呢，即如何判断双击事件？苹果采用的是第二种方式，所有 Safari 中的链接都要延迟 300 毫秒，通过这种方式观察用户是不是要发出第二次单击事件。有，则放大内容；没有，则跳转链接。这样的结果是，html 网页单击的反应有一点迟钝。

微信小程序中是没有这样的问题。hover-start-time 默认 50 毫秒，也是小程序相对于 html5 开发的优势，即没有单击延迟。

hover-start-time 最小可以设置多少毫秒？

小程序中所有的界面效果都受限于它的渲染帧率。

小程序的帧率是每秒 60 帧，即一帧为 1000ms/60 ≈ 17ms。

所以hover-start-time最小也就 17ms，小于 17ms 是没有意义的，和设置 17ms 效果一样。