# 触控功能

JsView中的触控功能，设计思路是js定规则后尽最大可能减少触控处理过程中和js的交互，以提升触控处理中drag/fling的性能。 (TBD: 当前版本PC浏览器模拟环境上的click/drag/fling暂时未实现)

# 1. 普通div元素上追加点击支持

在div元素上追加 @click="回调函数" 即可

例如:

  <script setup>
  /* 声明click的回调函数 */
  const click_callback = ()=>{
    console.log("on clicked");
  }
  <script/>

  <template>
    <div 
      :style="{
        width:100, 
        height:100, 
        backgroundColor: '#FF00FF'}"
      @click="click_callback"/>
  </template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 2. 普通元素中追加长按的响应

通过element的ref句柄，调用 jsvSetTapListener 函数来设置，具体参考

Element的jsvSetTapListener

# 3. MetroWidget支撑的列表触控处理(drag/fling/click)

打开props中的touchFlag即可：

// props
//   touchFlag {int} 触控的开关, 
//       0:关闭, 1:打开. 打开后支持drag, fling; 
//       另外，item要支持点击(click)时，要在measure回调函数中，对measuresObject的追加enableTap:true

1
2
3
4

# 4. 长文本滚动

使用JsvScrollBox和JsvScrollFollow组件来完成。可以参考“功能实例->长文字”的样例(如下)

node_modules/@shijiu/jsview-vue-samples/LongText/LongTextScroll.vue

因为是整篇文字是一部分可见，所以用JsvScrollBox的抽屉模式(drawer)

这两个组件的参数说明见:
node_modules/@shijiu/jsview-vue/utils/JsViewVueWidget/JsvScrollBox/JsvScrollBox.vue
node_modules/@shijiu/jsview-vue/utils/JsViewVueWidget/JsvScrollBox/JsvScrollFollow.vue

# 5. 进度条拖动(视频进度条)

使用JsvScrollBox和JsvScrollFollow组件来完成。可以参考“触控->可拖拽进度条”的样例(如下)

node_modules/@shijiu/jsview-vue-samples/ScrollBoxTest/SizeDivBar.vue
node_modules/@shijiu/jsview-vue-samples/ScrollBoxTest/ClipBar.vue
node_modules/@shijiu/jsview-vue-samples/ScrollBoxTest/NinePatchBar.vue

因为是进度条游标在滚动区域中滑动，所以用JsvScrollBox的Pin模式

# 6. div拖动和对齐检测

使用JsvDragBox组件来完成此功能，可参考"触控->DragBox"的样例(如下)

node_modules/@shijiu/jsview-vue-samples/DragBox/App.vue

使用此组件时，注意 setSensor 的敏感度设置，越小性能开销越大(js是单线程，过于频繁的消息和回调会导致其他任务无法执行)

此组件的参数说明见:
node_modules/@shijiu/jsview-vue/utils/JsViewVueWidget/JsvDragBox/JsvDragBox.vue

← WebSocket (Vue)JsvFocusBlock →