请选择 进入手机版 | 继续访问电脑版

[Studio3] avm 在app端,某些情况下,点击事件无法触发

[复制链接]
忽上忽下 发表于 2021-12-3 21:38:34
测试demo需要先引入act的 nav-bar 组件, 然后点击测试按钮

出现弹窗后点击  下载量 按钮, 会发现没有任何效果

点击 更新时间  按钮的话,会触发点击事件

发现平台为安卓7.1.2  vivo x9i     ios 没有测试

下面是demo代码:


test.rar 下载附件
2021-12-3 21:36上传1.76 KB下载次数: 3

2条回复

杨永安 官方版主 489Y币
浮层最好是放在根节点下 且使用 position:absolute
  1. <template>
  2.         <view class="page">
  3.                 <a-nav-bar title="测试" v-bind:hide-line="false" v-bind:height="45" left-arrow onclick-left="onClickLeft">
  4.                         <template _slot="right" class="">
  5.                                 <text onclick="filter">测试</text>
  6.                         </template>
  7.                 </a-nav-bar>
  8.                 <text>{filter_index}</text>
  9.                 <view class="surplus-box disflex-v-space-between disflex position-rel">
  10.                         <view class="flex disflex-h-center">
  11.                                 <view class=" disflex-middle disflex" onclick="level_3">
  12.                                         <text v-bind:class="'nav-bar-text-list ' + (active_index == 3 ? 'c-4782F2':'c-33344A')">
  13.                                                 三级类目
  14.                                         </text>
  15.                                 </view>
  16.                         </view>
  17.                         <view class="flex disflex-h-center">
  18.                                 <view class=" disflex-middle disflex" onclick="level_4">
  19.                                         <text v-bind:class="'nav-bar-text-list ' + (active_index == 4 ? 'c-4782F2':'c-33344A')">
  20.                                                 四级类目
  21.                                         </text>
  22.                                 </view>
  23.                         </view>
  24.                         <view class="flex disflex-h-center">
  25.                                 <view class=" disflex-middle disflex" onclick="level_5">
  26.                                         <text v-bind:class="'nav-bar-text-list ' + (active_index == 5 ? 'c-4782F2':'c-33344A')">
  27.                                                 五级类目
  28.                                         </text>
  29.                                 </view>
  30.                         </view>
  31.                         <view class="flex disflex-h-center">
  32.                                 <view class=" disflex-middle disflex" onclick="level_6">
  33.                                         <text v-bind:class="'nav-bar-text-list ' + (active_index == 6 ? 'c-4782F2':'c-33344A')">
  34.                                                 六级类目
  35.                                         </text>
  36.                                 </view>
  37.                         </view>
  38.                 </view>
  39.                 <view class="position-rel flex" style="position:absolute;height:100%;width:100%;">
  40.                         <view v-show="filter_show" class="filter-mask" onclick="close_filter"></view>
  41.                         <view v-show="filter_show" class="filter-box">
  42.                                 <view class="margin-left-12 margin-right-12 flex disflex-middle bottom-line disflex-v-center"
  43.                                         onclick="showDownloadSort">
  44.                                         <text
  45.                                                 v-bind:class="'filter-text ' + (filter_index == 3 || filter_index == 4 ? 'c-4782F2':'c-33344A')">
  46.                                                 下载量
  47.                                         </text>
  48.                                         <image v-show="filter_index == 1 || filter_index == 2" src="../../image/icon-045.png"
  49.                                                 class="no-active-filter" />
  50.                                         <image v-show="filter_index == 3 || filter_index == 4"
  51.                                                 v-bind:src="filter_index == 3 ? '../../image/icon-044.png':'../../image/icon-043.png' "
  52.                                                 class="no-active-filter" />
  53.                                 </view>
  54.                                 <view class="margin-left-12 margin-right-12 flex disflex-middle disflex-v-center"
  55.                                         onclick="showUpDateSort">
  56.                                         <text
  57.                                                 v-bind:class="'filter-text ' + (filter_index == 1 || filter_index == 2 ? 'c-4782F2':'c-33344A')">
  58.                                                 更新时间
  59.                                         </text>
  60.                                         <image v-show="filter_index == 3 || filter_index == 4" src="../../image/icon-045.png"
  61.                                                 class="no-active-filter" />
  62.                                         <image v-show="filter_index == 1 || filter_index == 2"
  63.                                                 v-bind:src="filter_index == 1 ? '../../image/icon-044.png':'../../image/icon-043.png' "
  64.                                                 class="no-active-filter" />
  65.                                 </view>
  66.                         </view>
  67.                 </view>
  68.         </view>
  69. </template>
  70. <script>
  71. import ANavBar from "../../components/act/a-nav-bar"
  72. export default {
  73.         name: "home_contract_model_list",
  74.         apiready() {
  75.                 //like created
  76.         },
  77.         data() {
  78.                 return {
  79.                         show_mask: false,
  80.                         active_index: -1,
  81.                         model_list: [],
  82.                         filter_show: false,
  83.                         filter_index: 1,
  84.                 }
  85.         },
  86.         methods: {
  87.                 showDownloadSort() {
  88.                         if (this.data.filter_index == 3) {
  89.                                 this.data.filter_index = 4
  90.                         } else {
  91.                                 this.data.filter_index = 3
  92.                         }
  93.                         this.close_filter()
  94.                 },
  95.                 showUpDateSort() {
  96.                         if (this.data.filter_index == 1) {
  97.                                 this.data.filter_index = 2
  98.                         } else {
  99.                                 this.data.filter_index = 1
  100.                         };
  101.                         this.close_filter()
  102.                 },
  103.                 // 点击三级类目
  104.                 level_3() {
  105.                         this.data.active_index = 3
  106.                         this.data.show_mask = true
  107.                         this.data.filter_index = 1
  108.                 },
  109.                 // 点击四级类目
  110.                 level_4() {
  111.                         this.data.active_index = 4
  112.                         this.data.show_mask = true
  113.                         this.data.filter_index = 1
  114.                 },
  115.                 // 点击五级类目
  116.                 level_5() {
  117.                         this.data.active_index = 5
  118.                         this.data.show_mask = true
  119.                         this.data.filter_index = 1
  120.                 },
  121.                 // 点击六级类目
  122.                 level_6() {
  123.                         this.data.active_index = 6
  124.                         this.data.show_mask = true
  125.                         this.data.filter_index = 1
  126.                 },
  127.                 close_deop_down() {
  128.                         this.data.active_index = -1
  129.                         this.data.show_mask = false
  130.                 },
  131.                 close_filter() {
  132.                         this.data.filter_show = false
  133.                 },
  134.                 filter() {
  135.                         this.data.filter_show = true
  136.                 },
  137.                 search() {
  138.                         $api.setStorage(storage.BEFOREPAGENAME, api.winName)
  139.                         $api.openWin("home_search")
  140.                 },
  141.         },
  142. }
  143. </script>

  144. <style src="../../css/api.css" />
  145. <style src="../../css/color.css" />
  146. <style>
  147. .no-active-filter {
  148.         width: 13px;
  149.         height: 13px;
  150. }
  151. .filter-text {
  152.         font-size: 13px;
  153.         font-family: PingFangSC-Regular, PingFang SC;
  154.         font-weight: 400;
  155.         line-height: 19px;
  156. }
  157. .bottom-line {
  158.         border-bottom: 0.5px solid #eaeef4;
  159. }
  160. .margin-right-12 {
  161.         margin-right: 12px;
  162. }
  163. .margin-left-12 {
  164.         margin-left: 12px;
  165. }
  166. .filter-top {
  167.         width: 12px;
  168.         height: 8px;
  169.         position: absolute;
  170.         top: -8px;
  171.         right: 10px;
  172.         z-index: 6;
  173. }
  174. .filter-box {
  175.         width: 92px;
  176.         height: 91px;
  177.         background: #ffffff;
  178.         box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.16);
  179.         border-radius: 8px;
  180.         position: absolute;
  181.         right: 10px;
  182.         top: 49px;
  183.         z-index: 6;
  184. }
  185. .filter-mask {
  186.         width: 100%;
  187.         height: 1000px;
  188.         position: absolute;
  189.         top: -100px;
  190.         left: 0;
  191.         z-index: 1;
  192. }
  193. .collect-icon {
  194.         width: 17px;
  195.         height: 17px;
  196.         margin-right: 14px;
  197. }
  198. .right-line {
  199.         border-right: solid 0.5px rgba(152, 162, 172, 0.4);
  200.         height: 10px;
  201.         width: 1px;
  202.         margin-left: 10px;
  203.         margin-right: 10px;
  204. }
  205. .item-next-text {
  206.         font-size: 12px;
  207.         font-family: PingFangSC-Regular, PingFang SC;
  208.         font-weight: 400;
  209.         color: #98a2ac;
  210.         line-height: 16px;
  211. }
  212. .item-next-text-box {
  213.         margin-top: 12px;
  214. }
  215. .item-title-text {
  216.         font-size: 14px;
  217.         font-family: PingFangSC-Medium, PingFang SC;
  218.         font-weight: 500;
  219.         color: #33344a;
  220.         line-height: 20px;
  221. }
  222. .item-text-box {
  223.         margin-left: 19px;
  224. }
  225. .item-icon {
  226.         width: 46px;
  227.         height: 46px;
  228.         margin-left: 14px;
  229. }
  230. .drop-item-text {
  231.         height: 19px;
  232.         font-size: 13px;
  233.         font-family: PingFangSC-Regular, PingFang SC;
  234.         font-weight: 400;
  235.         color: #666c7b;
  236.         line-height: 19px;
  237. }
  238. .drop-item {
  239.         margin-left: 14px;
  240.         margin-right: 14px;
  241.         height: 47px;
  242.         border-bottom: 0.5px #f2f2f7 solid;
  243. }
  244. .drop-down {
  245.         width: 100%;
  246.         height: auto;
  247.         background: #ffffff;
  248.         border-radius: 0px 0px 10px 10px;
  249.         min-height: 47px;
  250.         z-index: 2;
  251.         border-top: 0.5px #f2f2f7 solid;
  252. }
  253. .mask {
  254.         position: absolute;
  255.         width: 100%;
  256.         background: rgba(0, 0, 0, 0.5);
  257.         height: 100%;
  258.         top: 0;
  259.         left: 0;
  260.         z-index: 1;
  261. }
  262. .item-box {
  263.         width: 100%;
  264.         height: 86px;
  265.         background: #ffffff;
  266.         border-radius: 4px;
  267.         margin-top: 10px;
  268. }
  269. .list-box {
  270.         margin-left: 14px;
  271.         margin-right: 14px;
  272. }
  273. .nav-bar-text-list {
  274.         width: 54px;
  275.         height: 19px;
  276.         font-size: 13px;
  277.         font-family: PingFangSC-Regular, PingFang SC;
  278.         font-weight: 400;
  279.         line-height: 19px;
  280. }
  281. .down-arrow {
  282.         width: 10px;
  283.         height: 10px;
  284.         margin-left: 1px;
  285. }
  286. .surplus-box {
  287.         background: #fff;
  288.         height: 45px;
  289.         width: 100%;
  290. }
  291. .filter-icon {
  292.         width: 19px;
  293.         height: 19px;
  294.         margin-left: 19px;
  295. }
  296. .search-icon {
  297.         width: 19px;
  298.         height: 19px;
  299. }
  300. .page {
  301.         height: 100%;
  302.         background: #f2f2f7;
  303. }
  304. </style>
复制代码


忽上忽下 业余车手 1190Y币
大佬,辛苦赶紧反馈吧,这个问题真的非常严重
杨永安 · 2021-12-6 14:53浮层最好是放在根节点下 且使用 position:absolute
您需要登录后才可以回帖 登录

本版积分规则