avm中通用事件中的touch事件有问题

Hello_绿洲

avm中通用事件中的touch事件存在问题，页面分为页面A和页面B，页面A中放置一个头部，使用普通的view或者act中的a-nav-bar组件都试过，然后并列元素frame引入页面B，在页面B中的按钮touch事件监听手指按住上移，手指不松开，离开按钮位置，不行的时候会进入到touchcancel，可以的时候还是touchmove，手指松开才会进入到touchend，页面A中头部的高度过大或者过小，会导致页面B中按钮touch事件发生不行的情况，手指在按钮处按住上移，手指不松开，离开按钮位置，会进入到touchcancel
页面A

1. <template>
   
2.   <view class="">
   
3.     <!-- 1.尝试过程，传height为44是可以的，数值大了或小了不行 -->
   
4.     <!-- <a-nav-bar title="222" :hide-line="false" :height="68" left-arrow>
   
5.     </a-nav-bar> -->
   
6.       
   
7.     <!-- 2.尝试过程，nav的里的height为88px可以，大了或小了不行 -->
   
8.    <!--  <view class="nav">/view> -->
   
9. 
   
10.     <!-- 3.尝试过程，此处是直接将act中的a-nav-bar拷过来 -->
    
11.     <safe-area class="a-nav-bar">
    
12.       <!-- ！！！！！此处style里的height传30,80不行，44,50啥的就可以，好像太大太小都不行 -->
    
13.       <view class="a-nav-bar__content" style="height: 30px">
    
14.         <view class="a-nav-bar__click-warp a-nav-bar__left" _slot="left" @click="leftClick">
    
15.           <image src="../../image/back.png" class="a-nav-bar__icon" />
    
16.         </view>
    
17.         <text class="a-nav-bar__title" style="font-size: 16px;color: #000;" @click="titleClick">
    
18.           22222
    
19.         </text>
    
20.       </view>
    
21.     </safe-area>
    
22. 
    
23.     <!-- 以下保持不变 -->
    
24.     <frame class="" avm="true" name="test1_frm" url="../test1_frm/test1_frm.stml">
    
25.     </frame>
    
26.   </view>
    
27. </template>
    
28. <script>
    
29.   // import ANavBar from "../../components/act/a-nav-bar";
    
30.   export default {
    
31.     name: 'test1',
    
32.     apiready() {
    
33.       console.log(api.safeArea.top)
    
34.     },
    
35.     install() {
    
36. 
    
37.     },
    
38.     installed() {
    
39.     },
    
40.     data() {
    
41.       return {
    
42.       }
    
43.     },
    
44.     methods: {
    
45. 
    
46.     }
    
47.   }
    
48. </script>
    
49. 
    
50. <style>
    
51.   /* common */
    
52.   .nav {
    
53.     width: 100%;
    
54.     height: 68px;
    
55.   }
    
56. 
    
57.   .a-nav-bar {
    
58.     background-color: #fff;
    
59.   }
    
60. 
    
61.   .a-nav-bar--line {
    
62.     box-shadow: 1px 1px 1px #e6e6e6;
    
63.     margin-bottom: 2px;
    
64.   }
    
65. 
    
66.   .a-nav-bar__content {
    
67.     flex-flow: row nowrap;
    
68.   }
    
69. 
    
70. 
    
71.   .a-nav-bar__click-warp {
    
72.     position: absolute;
    
73.     height: 100%;
    
74.     flex-flow: row nowrap;
    
75.     align-items: center;
    
76.     padding: 0 16px;
    
77.     z-index: 99;
    
78.   }
    
79. 
    
80.   .a-nav-bar__left {
    
81.     left: 0;
    
82.   }
    
83. 
    
84.   .a-nav-bar__right {
    
85.     right: 0;
    
86.   }
    
87. 
    
88.   .a-nav-bar__text {
    
89.     color: #333;
    
90.     font-size: 14px;
    
91.   }
    
92. 
    
93.   .a-nav-bar__icon {
    
94.     height: 16px;
    
95.     width: 16px;
    
96.   }
    
97. 
    
98.   .a-nav-bar__title {
    
99.     display: flex;
    
100.     justify-content: center;
     
101.     align-items: center;
     
102.     flex: 1;
     
103.     font-family: PingFangSC-Medium, PingFang SC;
     
104.     align-self: center;
     
105.     text-align: center;
     
106.     font-weight: 500;
     
107.     white-space: nowrap;
     
108.     text-overflow: ellipsis;
     
109.     overflow: hidden;
     
110.   }
     
111. </style>

复制代码

页面B

1. <template>
   
2.   <view class="page">
   
3.     <scroll-view class="scroll-view flex" show-scrollbar="false" scroll-y></scroll-view>
   
4.     <view class="chat-operating disflex disflex-middle" id="chatOperating">
   
5.       <view class="flex">
   
6.         <view id="voiceButton" class="chat-input-box">
   
7.           <!-- 手指按住上移，手指不松开，离开按钮位置，不行的时候会进入到touchcancel，可以的时候还是touchmove，手指松开才会进入到touchend -->
   
8.           <view id="" class="chat-voice-word-box" @longpress="voiceLongpress"
   
9.             @touchstart="voiceTouchstart" @touchmove="voiceTouchmove" @touchend="voiceTouchend"
   
10.             @touchcancel="voiceTouchcancel">
    
11.             <text class="chat-voice-word fz14 c-33344A">按住 说话</text>
    
12.           </view>
    
13.         </view>
    
14.       </view>
    
15.     </view>
    
16.     <safe-area class="b-fff"></safe-area>
    
17.   </view>
    
18. </template>
    
19. <script>
    
20.   // import ANavBar from "../../components/act/a-nav-bar";
    
21.   export default {
    
22.     name: 'test1_frm',
    
23.     apiready() {
    
24.     },
    
25.     install() {
    
26. 
    
27.     },
    
28.     installed() {
    
29.     },
    
30.     data() {
    
31.       return {
    
32.       }
    
33.     },
    
34.     methods: {
    
35.       voiceLongpress(e) {
    
36.         console.log("-----longpress----")
    
37.       },
    
38.       voiceTouchstart(e) {
    
39.         console.log("-----touchstart----")
    
40.       },
    
41.       voiceTouchmove(e) {
    
42.         console.log("-----touchmove----")
    
43.       },
    
44.       voiceTouchend(e) {
    
45.         console.log("-----touchend----")
    
46.       },
    
47.       voiceTouchcancel(e) {
    
48.         console.log("-----touchcancel----")
    
49.       },
    
50.     }
    
51.   }
    
52. </script>
    
53. <style>
    
54.   .flex {
    
55.     flex: 1;
    
56.   }
    
57. 
    
58.   .page {
    
59.     width: 100%;
    
60.     height: 100%;
    
61.   }
    
62. 
    
63.   .scroll-view{
    
64.     background-color: #4bc5f5;
    
65.   }
    
66. 
    
67.   .chat-operating {
    
68.     width: 100%;
    
69.     min-height: 52px;
    
70.     background: #ffffff;
    
71.     padding: 7px 14px;
    
72.     z-index: 9999;
    
73.   }
    
74. 
    
75.   .chat-operating-img {
    
76.     width: 23px;
    
77.     height: 23px;
    
78.   }
    
79. 
    
80.   .chat-voice-word-box {
    
81.     height: 38px;
    
82.     border-radius: 19px;
    
83.     background-color: #F7F8FA;
    
84.     text-align: center;
    
85.   }
    
86. 
    
87.   .chat-voice-word {
    
88.     height: 38px;
    
89.     line-height: 38px;
    
90.     text-align: center;
    
91.   }
    
92. </style>

复制代码

技术咨询-F

android 还是 iOS？

Hello_绿洲

ios13.5 ，iphone xs max

技术支持-F · 2022-2-17 16:44android 还是 iOS？

技术咨询-Kenny

注意页面 A 和 B 的大小，不要相互挤占了，我看你代码中没有为 frame 设置高度。