1.建立元件檔案 /components/bottom-modal

2.元件佈局

1 <view class="modal">
2   <view class="panel">
3     <i class="iconfont icon-shanchu"></i>
4   </view>
5 </view>

3.元件樣式

 1 .modal{
 2   position: fixed;
 3   left: 0;
 4   top: 0;
 5   right: 0;
 6   bottom
 
: 0;
 7   z-index: 99;
 8   text-align: center;
 9   background: rgba(0, 0, 0, 0.6);
10 }
11 
12 .panel{
13   position: absolute;
14   bottom: 0rpx;
15   left: 0;
16   width: 100%;
17   height: 300rpx;
18   background-color: #f8f8f8;
19 }
20 
21 /* 可以直接對外部樣式修改 */
22 .modal .icon-shanchu{
23   position: absolute;
24
 
   right: 10rpx;
25   top: 10rpx;
26   padding: 20rpx; /*為了增加點選區域大小*/
27 }

4.元件屬性設定 （與外部樣式共享，可以直接對外部樣式修改）

1 options:{
2  styleIsolation:'apply-shared'
3 },

5.新增元件引用

1 "usingComponents":{
2 2   "z-bottom-modal":"/components/bottom-modal/bottom-modal"
3 3 },

6.引用元件

1 <!-- 底部彈出層 -->
2 <z-bottom-modal/>