手把手教你在小程式中怎麼實現懸浮按鈕（程式碼範例）

小程式如何實現懸浮按鈕？以下這篇文章為大家介紹一下在小程式中實作懸浮按鈕功能的方法，希望對大家有幫助！

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

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

圖片按鈕實作

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

先上程式碼

頁面程式碼

<!--pages/content-detail/content-detail.wxml-->
<button plain=&#39;true&#39;   class="circle">
  <image mode=&#39;aspectFill&#39; src=&#39;/images/icon/collect.png&#39; class=&#39;image&#39;></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 時，容器由視口改為祖先。

懸浮按鈕的程式碼我們就已經完全實現了，我們來看下具體的效果

總結

整個懸浮按鈕的實現其實程式碼量不多，主要還是要對css的知識要掌握的更透徹，實現起來就沒那麼難，懸浮按鈕的實現只是一盤小菜。

更多程式相關知識，請造訪：

程式設計影片！ ！

以上是手把手教你在小程式中怎麼實現懸浮按鈕（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！