小程序action-sheet结合自定义tabbar显示

要实现此效果，遇到的问题：背景在电脑端调试的情况正常的情况下，手机端点击事件工单，返回回来的时候action-sheet卡住在屏幕上，点击遮罩层都不消失。更奇怪的是 这种情况并不是每次发生，而是有时候发生，有时候正常。

我思考问题出现在action-sheet的问题身上 在t-design中找了好久控制显示和隐藏的方法。但是都没有用处。最后解决方案如下
在写的自定义bar中

<!--custom-tab-bar/index.wxml-->
<view class="tab-bar">
  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{item.bulge?'bulge':''}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <view wx:if="item.bulge" class="tab-bar-bulge"></view>
    <image class="image" src="{{selected == index ? item.selectedIconPath : item.iconPath}}"></image>
    <!-- <view  wx:if="{{item.text}}" style="color: {{selected === index ? selectedColor : color}}" class="tab-bar-view">{{item.text}}</view> -->
    <view class="tab-bar-view" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
  </view>
</view>

<!-- <view>
  <t-action-sheet 
  id="childComponent" show-cancel="false" style="position: absolute; top: 0; z-index: 999;"></t-action-sheet>
</view> -->
<!-- <view wx:if="{{showvisble}}"> -->
  <t-action-sheet 
  id="childComponent" visibleFlag="true"></t-action-sheet>
<!-- </view> -->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

以上是找的圆形tabbar
可以看到我尝试了用view包裹组件 控制t-action的显示 但是发现在js代码中由于我让action-sheet显示的方法 是父组件获取子组件的id值.子组件的方法 在加了view之后 调用action-sheet 显示的方法失效了 因此我放弃了这个想法 但是 问了很厉害的同事之后 解决了！她操作的我想不通 但神奇的解决问题了 特此记录一下希望我能在记录的时候想通。

   if (url === '/pages/index3/index3') {
        this.selectComponent("#childComponent").handleAction()
      } else {
        wx.switchTab({
          url
        })
      }```js代码


解决方案如下

在她更改了t-design提供的本身的代码 使用wx-if来控制它的显示

```javascript
<t-action-sheet class="t-icon-system-regulation popur-sheet"   style= "color: #3f4146;" id="t-action-sheet"
 bind:selected="handleSelected"
 bind:close="handleclose"
 wx:if="{{visibleFlag}}"
 show-cancel="true"
 cancelText="关闭" />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

wx:if="{{visibleFlag}}"这段代码在我的脑海里是不敢和不觉得能实现的 但是能够作用 之前在我的印象里 t-design内部的代码只有api提供的字段能够生效但是 没想到wx：if也能生效

import ActionSheet, { ActionSheetTheme } from 'tdesign-miniprogram/action-sheet/index';

const firstGrid = [
  {
    label: '事件工单',
    icon: 'assignment',
    tickType: '1',
  },
  {
    label: '配置工单',
    icon: 'file-setting',
    tickType: '3',
  },
  {
    label: '变更工单',
    icon: 'refresh',
    tickType: '4',
  },
  {
    label: '报告工单',
    icon: 'system-regulation',
    tickType: '5',
  },
  {
    label: '计划任务',
    icon: 'fact-check',
    tickType: '6',
  },
  {
    label: '定时任务',
    icon: 'alarm-add',
    tickType: '7'
  },

];

Component({
  attached(){
    this.setData({
      visibleFlag:this.properties.visibleFlag1
    })
  },

  properties(){
    visibleFlag:Boolean},
  data:{
    showActionSheetFlag:false,
    visibleFlag:false,
  },

  methods: {
    handleAction() {
      this.setData({
        visibleFlag:true
      })
      ActionSheet.show({
        theme: ActionSheetTheme.Grid,
        selector: '#t-action-sheet',
        context: this,
        items: firstGrid,
      });
      
    },
    handleclose(){
      console.log('关闭');
      this.setData({
        visibleFlag:false
      })
    },
    
    handleSelected(e) {
      console.log(e.detail);
      var ticketType = e.detail.selected.tickType
      console.log("ticketType"+ticketType);
      
      this.handleclose()
      if(e.detail.selected.tickType === '6'){
        wx.navigateTo({
          url: '/pages/newPlanOrder/newPlanOrder?ticketType='+ ticketType,
        })
      }else if (e.detail.selected.tickType === '1' || '3' ||'4'||'5'){
        wx.navigateTo({
          url: '/pages/newOrder/newOrder?ticketType='+ ticketType,
        })
      }
    },
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

可以看到 父组件给子组件传值visibleFlag 在父组件中定义visibleFlag="true"为真 这个时候是可以显示 action-sheet的特性是即使可以显示但是不调用
ActionSheet.show({
theme: ActionSheetTheme.Grid,
selector: ‘#t-action-sheet’,
context: this,
items: firstGrid,
});
这段方法也不会显示 可能是隐藏但是存在 然后点击到tabbar的某个路由
调用子组件的方法可以可以这个时候1.父组件传visibleFlag值为ture handleAction这个方法里visibleFlag也为true 因此可以显示

在进行选择事件之后关闭掉了aciton-sheet 同时跳转界面

  this.handleclose()
      if(e.detail.selected.tickType === '6'){
        wx.navigateTo({
          url: '/pages/newPlanOrder/newPlanOrder?ticketType='+ ticketType,
        })
      }else if (e.detail.selected.tickType === '1' || '3' ||'4'||'5'){
        wx.navigateTo({
          url: '/pages/newOrder/newOrder?ticketType='+ ticketType,
        })
      }
1
2
3
4
5
6
7
8
9
10

我的误区：我想着跳转过去在关闭
在handleclose（）中将visibleFlag设置成为false 这样它就消失了

我的疑惑点：直接不给渲染了重新回到tabbar页面时候点击仍然能够打开？
猜测：没什么猜测 还是想不通 可能是双重保障吧 就是让close不管用 在wx：if 人为给它关闭 至于为什么原生的不管用 wx：if我就不懂了