微信小程序悬浮按钮

Posted 2021-12-14 嘻嘻的妙妙屋

效果

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

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

代码

底部居右

index.wxml

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

index.scss

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

  .releaseIcon 
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    border: solid 1rpx #FFC64B;
    padding: 20rpx;
  

底部居中

index.wxml

<view class="btnRelease">
  <van-button class="release" round type="info" disabled="disabled" color="#FFC64B">
    发布
  </van-button>
</view>

index.scss

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

    button 
      width: 220rpx;
      height: 58rpx;