在小程序中如何實現懸浮按鈕

小編給大家分享一下在小程序中如何實現懸浮按鈕，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在日常小程序開發中，我們可能會有這樣的需求，將按鈕懸浮，不隨著頁面的滑動而改變位置，例如文章詳情頁的分享按鈕，我想做成懸浮的樣子，或者首頁設置一個懸浮按鈕來實現一些可擴展的功能，既美觀又方便實用

實現懸浮按鈕我將從兩方面進行講解，一個是實現圖片按鈕，另一個是將按鈕進行懸浮。【相關學習推薦：小程序開發教程】

圖片按鈕實現

在小程序提供的button組件中，沒有單獨將圖片設置成按鈕的功能，雖然小程序沒有天然的組件支持，但是我們可以自己實現這樣的效果

先上代碼

頁面代碼

<!--pages/content-detail/content-detail.wxml-->
<button plain='true'   class="circle">
  <image mode='aspectFill' src='/images/icon/collect.png' class='image'></image>
</button>

css樣式代碼

.circle[plain] {
  padding: 0;
  border: none;
  width: 64rpx;
  height: 64rpx;
}

.image {
  width: 64rpx;
  height: 64rpx;
}

circle是按鈕的類，image是圖片的類

代碼很簡單，小蛋為大家解釋下上面的代碼

• 隱藏按鈕的顯示

  我們是要將圖片顯示出來，按鈕包裝的是圖片，所以要將按鈕隱藏，plain='true' 這個屬性即可實現。

• 隱藏按鈕的邊框

  除了要隱藏按鈕，還需要將其邊框進行隱藏，對應的css樣式為：border: none ，這里要注意，css的類上一定要加 [plain]

  例如 .circle[plain] ，不加的話邊框可能不會消失。

• 圖片和按鈕對齊

  圖片的大小需要和按鈕的大小保持一致，為了做到對齊，button中的css樣式要設置padding:0

懸浮按鈕實現

圖片按鈕設置好了，我們就要對其進行懸浮進行實現，要達到懸浮的效果只需要將按鈕樣式的position設置為fixed即可

.circle[plain] {
  display: flex;
  margin-right: 40rpx;
  right: 0;
  position: fixed;
  bottom: 15%;
  padding: 0;
  border: none;
  width: 64rpx;
  height: 64rpx;
}

position是位置屬性，它有許多不同的值，我們來看下官方給出的fixed的定義

不為元素預留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現在的每頁的固定位置。fixed屬性會創建新的層疊上下文。當元素祖先的 transform 屬性非 none 時，容器由視口改為該祖先。

以上是“在小程序中如何實現懸浮按鈕”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！