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

news2024/11/27 8:29:41

请添加图片描述
要实现此效果，遇到的问题：背景在电脑端调试的情况正常的情况下，手机端点击事件工单，返回回来的时候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> -->

以上是找的圆形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="关闭" />

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

可以看到父组件给子组件传值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,
        })
      }