表冠旋转 3+

UI 组件要支持表冠旋转是需要获取焦点的

实现 UI 组件随表冠的旋转而滑动，需要 UI 组件当前是获焦状态，当前⻚面只能有一个获得焦点。

默认焦点：在最外层的最后一个可响应表冠的组件上。

当组件获得焦点后，此时组件的伪类 foucs 样式生效，系统默认也可以添加伪类样式。

<template>
  <picker class="picker" type="time"></picker>
</template>

<style>
  .picker:foucs {
    background-color: red;
  }
</style>

自定义 UI 组件对旋转表冠的响应

开发者可以根据实际情况对组件响应旋转表冠事件进行自定义处理。

默认支持的表冠组件如下：

默认支持表冠的组件，其响应表冠选择和手指操作一致，组件上该触发的生命周期/事件都会触发。如 list 上面的 scroll 事件，picker 上面的 change 事件等等。

组件名称	类型
list	用来呈现连续、多行数据的组件，包含一系列相同类型的列表项。表冠旋转时会触发其 scrollbottom/scrolltop/scroll 等滚动行为相关的事件。
swiper	一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。表冠旋转时会触发其 change 等切换相关的事件。
picker	滑动选择器，允许用户从预定义范围中进行选择。当前支持时间选择器、日期选择器。表冠旋转时会触发其 change 事件。
slider	滑动选择器。表冠旋转时会触发其 change 事件
image	图片组件，用于图片缩放。
scroll	滚动视图容器。竖向或水平方向滚动容器，竖向滚动需要设置定高，水平滚动需要设置定宽。。表冠旋转时会触发其 scrollbottom/scrolltop/scroll 等滚动行为相关的事件

接口定义

属性

以下属性都是组件的通用属性

名称	类型	默认值	必填	描述
vibration-effect-enabled	Boolean	true	否	表冠旋转的时候是否具有震动的效果，true 表示有震动效 果，false 表示没有震动效果
rotation-sensitivity	Number	1	否	表冠灵敏度数值可设置为 高，正常，低以及默认的灵敏 度 1:低级，2:正常，3:高级
touch-focusable	Boolean	false	否	设置组件在触摸模式下是否可以接收对焦 。

事件

事件名称	类型	默认值	必填	描述
crownrotationchanged	Function	-	否	组件监听表冠旋转的回调事件，组件的通用事件。

事件参数返回值 Object 对象的具体参数说明如下:

接收参数	类型	说明
direction	Boolean	旋转方向，表冠逆时针是正转返回 true，顺时针是反转返回 false。
delta	delta	单次旋转变化量，重新旋转时会清零，正常低速情况下变化量的绝对值恒为 1，正 负代表旋转方向，正转为正，反转为负，单位为旋转事件的最小刻度。一周是：360
velocity	Number	旋转速度，方向之分与 delta 相同，单位为刻度/秒。
duration	Number	事件时间间隔，本次和上一次事件触发时的时间间隔，首次触发事件时时间为 0， 单位为毫秒。
state	Number	表冠旋转的状态，可取的值为 1:开始旋转，2:旋转中 ，3:旋转结束。

方法

方法名称	类型	说明
requestFocus	Boolean	设置当前要获取焦点的组件，入参为 true 让当前组件抢占焦点，优先级最 高。此方法也是组件的通用方法。

示例

以 Picker 组件是默认支持表冠旋转的,旋转表冠组件聚焦设置示例代码如 下:

<template>
  <picker class="picker" id="picker" type="time"></picker>
</template>
<script>
  export default {
    onReady() {
      const picker = this.$element('picker')
      picker.requestFocus(true)
    }
  }
</script>
<style>
  .picker {
    width: 750px;
    height: 750px;
    background-color: #000000;
  }
</style>

自定义 UI 组件支持表冠旋转

<template>
  <div id="box" @crownrotationchanged="onCrownRotationChanged"></div>
</template>
<script>
  export default {
    onCrownRotationChanged(ev){
      console.log('表冠事件输出', JSON.stringify(ev))
      // 改变亮度
    },
    onReady () {
       const box = this.$element("box")
       box.requestFocus(true)
    }
}
</script>