微信小程序底部弹出跨部分实现代码

您好，以下是微信小程序底部弹出跨部分实现代码的示例：

1. 在 app.json 中添加设置：

{
  "tabBar": {
    "custom": true,
    "color": "#999999",
    "selectedColor": "#000000",
    "backgroundColor": "#ffffff",
    "borderStyle": "white",
    "list": [{
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-fill.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "images/mine.png",
        "selectedIconPath": "images/mine-fill.png"
      }
    ]
  }
}

2. 在 app.js 中添加代码：

App({
  // ...
  globalData: {
    // ...
    isIphoneX: false // 是否为 iPhone X 系列手机
  },
  // ...
  onLaunch: function() {
    // ...
    // 判断是否为 iPhone X 系列手机，并保存到全局变量中
    wx.getSystemInfo({
      success: res => {
        let model = res.model;
        if (/iphone\sx/i.test(model) || /iphone/i.test(model) && res.screenHeight === 812) {
          this.globalData.isIphoneX = true;
        }
      }
    })
  }
  // ...
})

3. 在组件中添加代码：

<view class="tab-bar">
  <view class="tab-bar-item" wx:for="{{items}}" wx:key="{{index}}" bindtap="clickItem" data-index="{{index}}">
    <image class="icon" src="{{item.iconPath}}" wx:if="{{!item.active}}" />
    <image class="icon icon-active" src="{{item.selectedIconPath}}" wx:if="{{item.active}}" />
    <view class="text">{{item.text}}</view>
  </view>
  <view class="extra" wx:if="{{showExtra}}" style="{{extraStyle}}" bindtap="clickExtra">
    <image class="extra-icon" src="{{extraIcon}}" />
    <view class="extra-text">{{extraText}}</view>
    <image class="extra-arrow" src="{{extraArrow}}" />
  </view>
</view>

Component({
  properties: {
    // tabBar 配置项
    items: {
      type: Array,
      value: []
    },
    // 是否显示额外按钮（例如发布按钮）
    showExtra: {
      type: Boolean,
      value: false
    },
    // 额外按钮的图标
    extraIcon: {
      type: String,
      value: ''
    },
    // 额外按钮的文本
    extraText: {
      type: String,
      value: ''
    },
    // 额外按钮的箭头图标
    extraArrow: {
      type: String,
      value: ''
    },
    // 额外按钮的位置
    extraPosition: {
      type: String,
      value: 'bottom' // 'bottom-left', 'bottom-right'
    }
  },

  methods: {
    clickItem(e) {
      const index = e.currentTarget.dataset.index;
      this.triggerEvent('click-item', {index});
    },

    clickExtra(e) {
      this.triggerEvent('click-extra');
    }
  },

  /**
   * 组件生命周期函数，在组件实例进入页面节点树时执行
   */
  attached() {
    // 计算额外按钮的样式
    const extraWidth = 100;
    const extraTop = getApp().globalData.isIphoneX ? '-34rpx' : '0';
    let extraStyle = '';
    switch (this.data.extraPosition) {
      case 'bottom-left':
        extraStyle = `left:${extraWidth / 2}px;bottom:0;top:${extraTop};transform:translateX(-50%)`;
        break;
      case 'bottom-right':
        extraStyle = `right:${extraWidth / 2}px;bottom:0;top:${extraTop};transform:translateX(50%)`;
        break;
      default:
        extraStyle = `left:50%;bottom:0;top:${extraTop};transform:translateX(-50%)`;
        break;
    }
    this.setData({extraStyle});
  }
});

希望以上代码可以帮助到您，如果还有其他问题请随时提出哦！