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

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

成都網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、重慶網(wǎng)站建設(shè)公司、微信開發(fā)、小程序開發(fā)、集團(tuán)成都企業(yè)網(wǎng)站定制等服務(wù)項(xiàng)目。核心團(tuán)隊(duì)均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗(yàn)，服務(wù)眾多知名企業(yè)客戶；涵蓋的客戶類型包括：成都混凝土攪拌機(jī)等眾多領(lǐng)域，積累了大量豐富的經(jīng)驗(yàn)，同時(shí)也獲得了客戶的一致表揚(yáng)！

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

實(shí)現(xiàn)懸浮按鈕我將從兩方面進(jìn)行講解，一個(gè)是實(shí)現(xiàn)圖片按鈕，另一個(gè)是將按鈕進(jìn)行懸浮。【相關(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是圖片的類

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

  • 隱藏按鈕的顯示

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

  • 隱藏按鈕的邊框

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

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

  • 圖片和按鈕對齊

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

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

圖片按鈕設(shè)置好了，我們就要對其進(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ù)留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時(shí)不會改變。打印時(shí)，元素會出現(xiàn)在的每頁的固定位置。fixed屬性會創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform 屬性非 none 時(shí)，容器由視口改為該祖先。

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

當(dāng)前文章：在小程序中如何實(shí)現(xiàn)懸浮按鈕
網(wǎng)頁鏈接：http://muchs.cn/article6/ihgeig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、電子商務(wù)、移動網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

小程序開發(fā)