微信小程序实现底部操作栏

底部操作栏实现功能：悬浮于页面底部。

底部操作栏会遮挡页面底部一部分的内容，可以通过给这部分内容设置和底部操作栏一样高度的 padding-bottom 来解决。

  
    按钮1
    按钮2
    按钮3
  
  
  


/* action-bar.wxss */
.container {
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  background: #fff;
  border-top: 2rpx solid #efefef;
  /* 悬浮于页面底部 */
  position: fixed;
  bottom: 0;
  z-index: 99;
}

.action-bar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

{
  "component": true,
  "usingComponents": {
    "safe-dsitance": "/components/safe-distance/safe-distance"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

/* safe-distance.wxss */
.safe-distance-bottom {
  width: 100%;
  // 苹果官方提供的两个 CSS 函数：constant() （兼容 IOS < 11.2）和 env() （兼容 IOS >= 11.2）用于获取安全区域与边界的距离。
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
1
2
3
4
5
6
7
8
9
10