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

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

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

在写的自定义bar中

javascript 复制代码

<!--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> -->

以上是找的圆形tabbar

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

javascript 复制代码

   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="关闭" />

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

javascript 复制代码

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,
        })
      }
    },
  },
});

可以看到父组件给子组件传值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 同时跳转界面

javascript 复制代码

  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,
        })
      }

我的误区：我想着跳转过去在关闭

在handleclose（）中将visibleFlag设置成为false 这样它就消失了

我的疑惑点：直接不给渲染了重新回到tabbar页面时候点击仍然能够打开？

猜测：没什么猜测还是想不通可能是双重保障吧就是让close不管用在wx：if 人为给它关闭至于为什么原生的不管用 wx：if我就不懂了