整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
日常小程序開發(fā)中，我們可能會有這樣的需求，將按鈕懸浮，不隨著頁面的滑動而改變位置，例如文章詳情頁的分享按鈕，我想做成懸浮的樣子，或者首頁設(shè)置一個懸浮按鈕來實現(xiàn)一些可擴展的功能，既美觀又方便實用
實現(xiàn)懸浮按鈕我將從兩方面進行講解，一個是實現(xiàn)圖片按鈕，另一個是將按鈕進行懸浮。
在小程序提供的button組件中，沒有單獨將圖片設(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>
復(fù)制代碼css樣式代碼
.circle[plain] {
padding: 0;
border: none;
width: 64rpx;
height: 64rpx;
}
.image {
width: 64rpx;
height: 64rpx;
}
復(fù)制代碼circle是按鈕的類，image是圖片的類
代碼很簡單，小蛋為大家解釋下上面的代碼
圖片按鈕設(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;
}
復(fù)制代碼position是位置屬性，它有許多不同的值，我們來看下官方給出的fixed的定義
不為元素預(yù)留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現(xiàn)在的每頁的固定位置。fixed屬性會創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform 屬性非 none 時，容器由視口改為該祖先。
懸浮按鈕的代碼我們就已經(jīng)完全實現(xiàn)了，我們來看下具體的效果
整個懸浮按鈕的實現(xiàn)其實代碼量并不多，主要還是要對css的知識要掌握的更透徹，實現(xiàn)起來就沒那么難，懸浮按鈕的實現(xiàn)只是一盤小菜，下一篇文章我將帶大家實現(xiàn)按鈕點擊呈現(xiàn)心形超酷炫的點贊特效，關(guān)注我，一起成長
為大家介紹使用 CSS 來制作按鈕。
基本按鈕樣式
默認(rèn)按鈕 CSS 按鈕
CSS 實例
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
按鈕顏色
GreenBlueRedGrayBlack
我們可以使用 background-color 屬性來設(shè)置按鈕顏色:
CSS 實例
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
嘗試一下 ?
按鈕大小
10px12px16px20px24px
我們可以使用 font-size 屬性來設(shè)置按鈕大小:
CSS 實例
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
圓角按鈕
2px4px8px12px50%
我們可以使用 border-radius 屬性來設(shè)置圓角按鈕:
CSS 實例
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
嘗試一下 ?
按鈕邊框顏色
綠藍(lán)紅灰黑
我們可以使用 border 屬性設(shè)置按鈕邊框顏色:
CSS 實例
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
嘗試一下 ?
鼠標(biāo)懸停按鈕
綠藍(lán)紅灰黑
綠藍(lán)紅灰黑
我們可以使用 :hover 選擇器來修改鼠標(biāo)懸停在按鈕上的樣式。
提示: 我們可以使用 transition-duration 屬性來設(shè)置 "hover" 效果的速度:
CSS 實例
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
按鈕陰影
陰影按鈕鼠標(biāo)懸停后顯示陰影
我們可以使用 box-shadow 屬性來為按鈕添加陰影:
CSS 實例
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
嘗試一下 ?
禁用按鈕
正常按鈕禁用按鈕
我們可以使用 opacity 屬性為按鈕添加透明度 (看起來類似 "disabled" 屬性效果)。
提示: 我么可以添加 cursor 屬性并設(shè)置為 "not-allowed" 來設(shè)置一個禁用的圖片:
CSS 實例
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
嘗試一下 ?
按鈕寬度
250px
50%100%
默認(rèn)情況下，按鈕的大小有按鈕上的文本內(nèi)容決定( 根據(jù)文本內(nèi)容匹配長度 )。 我們可以使用 width 屬性來設(shè)置按鈕的寬度:
提示: 如果要設(shè)置固定寬度可以使用像素 (px) 為單位，如果要設(shè)置響應(yīng)式的按鈕可以設(shè)置為百分比。
CSS 實例
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
嘗試一下 ?
按鈕組
ButtonButtonButtonButton
移除外邊距并添加 float:left 來設(shè)置按鈕組:
CSS 實例
.button {
float: left;
}
嘗試一下 ?
帶邊框按鈕組
ButtonButtonButtonButton
我們可以使用 border 屬性來設(shè)置帶邊框的按鈕組:
CSS 實例
.button {
float: left;
border: 1px solid green
}
嘗試一下 ?
按鈕動畫
CSS 實例
鼠標(biāo)移動到按鈕上后添加箭頭標(biāo)記:
Hover
嘗試一下 ?
CSS 實例
點擊時添加 "波紋" 效果:
Click
CSS 實例
點擊時添加 "壓下" 效果:
Click
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
UniApp中，可以通過在頁面的header或footer中添加懸浮按鈕來實現(xiàn)全站統(tǒng)一的懸浮按鈕。以下是一個簡單的示例代碼：
```html
<template>
<view class="container">
<view class="header">
<view class="logo">Logo</view>
<view class="button" @click="handleButtonClick">
<text>懸浮按鈕</text>
</view>
</view>
<view class="content">
<!-- 頁面內(nèi)容 -->
</view>
<view class="footer">
<view class="logo">Logo</view>
<view class="button" @click="handleButtonClick">
<text>懸浮按鈕</text>
</view>
</view>
</view>
</template>
<script>
export default {
methods: {
handleButtonClick() {
// 懸浮按鈕點擊事件的處理邏輯
}
}
}
</script>
```
在上面的代碼中，我們在頁面的header和footer中都添加了一個懸浮按鈕，并且都綁定了同一個點擊事件。當(dāng)用戶點擊懸浮按鈕時，會觸發(fā)`handleButtonClick`方法，你可以在這個方法中添加你想要實現(xiàn)的功能。例如，如果你想要在用戶點擊懸浮按鈕時跳轉(zhuǎn)到另一個頁面，你可以在`handleButtonClick`方法中添加如下代碼：
```javascript
handleButtonClick() {
this.$router.push('/target-page')
}
```
其中，`'/target-page'`是你想要跳轉(zhuǎn)的目標(biāo)頁面的路徑。這樣，當(dāng)用戶點擊懸浮按鈕時，就會跳轉(zhuǎn)到指定的頁面。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
