在小程序中如何實(shí)現(xiàn)懸浮按鈕

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

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

實(shí)現(xiàn)懸浮按鈕我將從兩方面進(jìn)行講解，一個(gè)是實(shí)現(xiàn)圖片按鈕，另一個(gè)是將按鈕進(jìn)行懸浮?！鞠嚓P(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

圖片按鈕實(shí)現(xiàn)

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

先上代碼

頁面代碼

<!--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是圖片的類

代碼很簡(jiǎn)單，小蛋為大家解釋下上面的代碼

• 隱藏按鈕的顯示

  我們是要將圖片顯示出來，按鈕包裝的是圖片，所以要將按鈕隱藏，plain='true' 這個(gè)屬性即可實(shí)現(xiàn)。

• 隱藏按鈕的邊框

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

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

• 圖片和按鈕對(duì)齊

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

懸浮按鈕實(shí)現(xiàn)

圖片按鈕設(shè)置好了，我們就要對(duì)其進(jìn)行懸浮進(jìn)行實(shí)現(xiàn)，要達(dá)到懸浮的效果只需要將按鈕樣式的position設(shè)置為fixed即可

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

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

不為元素預(yù)留空間，而是通過指定元素相對(duì)于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動(dòng)時(shí)不會(huì)改變。打印時(shí)，元素會(huì)出現(xiàn)在的每頁的固定位置。fixed屬性會(huì)創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform 屬性非 none 時(shí)，容器由視口改為該祖先。

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