微信小程序开发-如何在页面右下方放置固定图标

有些场景下我们需要在页面右下方或其他位置，固定放置一个图标，比如下面这个页面，右下角固定放置了一个转发按钮。

这个固定的按钮我们可以用button组件来实现。

首先，我们在对应页面的.wxml中放置一个普通按钮：

<view class="circle-float">
  <button style="color: #ffffff;font-size:23rpx;" hover-class='button-hover' open-type='share'>转发</button>
</view>

这个按钮定义了circle-float 和 button-hover的类型，我们需要在.wxss文件中定义样式：

.circle-float{
    color: #ffffff;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 20rpx;
    right: 20rpx;
    width: 110rpx;
    height: 110rpx;
    border-radius: 50%;
    font-size: 28rpx;
    background: #00CD66;
    z-index:100;
  }

  .button-hover {
    background-color: #00CD66;
  }

  button::after {
    border: none;
  }

  button {
    border: 0;
    background-color: transparent;
    outline: none;
  }

这样，固定按钮就实现了。