# 触控功能

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
Last Updated: 5/23/2024, 6:30:08 AM