【微信小程序】悬浮按钮_微信小程序悬浮按钮

效果

需要制作一个底部居右的悬浮按钮：

需要制作一个固定在底部居中的悬浮按钮：

代码

底部居右

index.wxml

<!-- 发布悬浮按钮 -->
<view class="releaseBtn" bind:tap="gotoRelease">
  <image class="releaseIcon" src="/images/pen.png" />
</view>
1
2
3
4

index.scss

// 发布悬浮按钮
.releaseBtn {
  position: fixed;
  bottom: 50px;
  right: 50px;

  .releaseIcon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    border: solid 1rpx #FFC64B;
    padding: 20rpx;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

底部居中

index.wxml

<view class="btnRelease">
  <van-button class="release" round type="info" disabled="{{disabled}}" color="#FFC64B">
    发布
  </van-button>
</view>
1
2
3
4
5

index.scss

  .btnRelease{
    position: fixed;
    bottom: 120rpx;
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;

    button {
      width: 220rpx;
      height: 58rpx;
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13