ポップアップ・プログラム内の底層コンポーネントマイクロチャネル小さなスロット

参考：
コンポーネントのスタイル分離

スロットアセンブリwxml

ボトムモード成分

ボトムmodal.wxml

<!--components/bottom-modal/bottom-modal.wxml-->
<view class="modal" hidden="{{!modalShow}}">
<view>
</view>
  <view class="panel">
      <i class="iconfont icon-shanchu1" bind:tap="onClose"></i>

  </view>
</view>

ボトムmodal.wxss

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
}

.panel {
  position: absolute;
  bottom: 0rpx;
  left: 0;
  width: 100%;
  min-height: 300rpx;
  box-sizing: border-box;
  background-color: #f8f8f8;
}

/* 可以直接对外部样式修改 */

.modal .icon-shanchu1 {
  position: absolute;
  right: 10rpx;
  top: 10rpx;
  padding: 20rpx; /* 为了增加点击区域大小 */
}

ボトムmodal.js

// components/bottom-modal/bottom-modal.js
Component({
  properties: {
    modalShow: Boolean
  },
  options: {
    styleIsolation: 'apply-shared'
  },
 
  data: {

  },

  methods: {
    onClose() {
      this.setData({
        modalShow: false,
      })
    },
  }
})

紹介のコンポーネント

組立demo.jsonの紹介

{
  "usingComponents": {
    "x-bottom-modal": "/components/bottom-modal/bottom-modal"
  }
}

demo.wxml

<view>
  <view class="publish-container" bind:tap="onPublish">
    <i class="iconfont icon-fabu"></i>
  </view>
  <view>
    <x-bottom-modal modalShow="{{modalShow}}" />
  </view>
</view>

demo.js

Page({
  data: {
    // 控制底部弹出层是否显示
    modalShow: false,
  },

  // 发布功能
  onPublish() {
    this.setData({
      modalShow: true,
    })
  },

  onLoad: function(options) {

  },

})

コンポーネントのスタイル分離

プロジェクトのルートディレクトリに追加しましたiconfont.wxss、プロジェクトアイコンに使用されているiconfont.wxss。

このプロジェクトのインポートインポートiconfont.wxssファイルのアイコンでapp.wxssでiconfont.wxssで使用することができます

しかしiconfont.wxssコンポーネントスタイル分離の問題で使用されるコンポーネントが存在します。

以下はのiconfont.wxss使用底モーダル成分のアイコンである

外部iconfont.wxss特性底モーダル成分分離処理を形成するのに必要なコンポーネントを使用します。

• 単離された（デフォルト一般的な場合）、互いに影響しません指定されたスタイルを使用して両方の内部から、コンポーネントクラスの定義の外側に、スタイルの分離を可能に示します。
• 適用-共有ページは、カスタムコンポーネントに影響を及ぼしますwxssスタイルを表すが、カスタムコンポーネントwxssスタイルは、ページには影響しません指定されました。
• 共有表現のページwxssスタイルは、カスタムコンポーネントは、スタイルのページで指定し、他の設定も適用され、共有または共有カスタムコンポーネントに影響しますwxss、カスタムコンポーネントに影響を与えます。（このオプションは、プラグインでは使用できません。）
  

  options: {
    styleIsolation: 'apply-shared'
  },

ポップショーと非表示レイヤーを制御

ポップアップ下の層を表示するには、公開ボタンをクリックし、ポップアップの下部を閉じるには[閉じる]ボタンをクリックしてください。

使用modalShowコントロールが表示され、非表示、modalShow =真が表示されます。

セットonPublish方法demo.js、ボタンを公開し、modalShow =真、表示ポップアップレイヤーをクリックしてください。

底モーダルで提供される方法は、隠された層を開く、閉じるボタンがクリックされると、アセンブリOnCloseの、modalShow = FALSE。

スロットスロットの構成要素wxml

wxmlスロットアセンブリ内にユーザによって提供さwxml構造部品を搬送するためのノードを含んでもよいです。

デフォルトでは、wxmlコンポーネントは、唯一のスロットを持つことができます。マルチスロットを使用する必要があり、JSを可能にするために、アセンブリ内で宣言することができます。

底モーダルJSを追加アセンブリmultipleSlots: true

2つの名前付きスロットは底モーダルアセンブリをwxml追加

    <!-- slot插槽  具名插槽-->
    <slot name="slot1"></slot>
    <slot name="slot2"></slot>

demo.wxmlという名前のスロットの使用

結果は以下の通りです：