微信小程序uniapp添加懸浮菜單的方法
更新時(shí)間：2022年04月18日 08:58:42 作者：可口可樂(lè)加冰
這篇文章主要為大家詳細(xì)介紹了微信小程序uniapp添加懸浮菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序uniapp添加懸浮菜單的具體代碼，供大家參考，具體內(nèi)容如下
在項(xiàng)目中可能會(huì)有一些頁(yè)面需要加一個(gè)懸浮按鈕，提供一些額外的菜單
本項(xiàng)目通過(guò)uniapp來(lái)演示如何將一個(gè)按鈕懸浮在頁(yè)面右下角
有需要的話需要把view標(biāo)簽替換成div
效果：
想直接看全部代碼不想看各種逼逼叨叨的請(qǐng)直接翻到最下邊。。
一、繪制按鈕
通過(guò)menushow來(lái)控制顯示內(nèi)容，顯示菜單時(shí)按鈕文字變?yōu)?rdquo;隱藏“
<view class="floatbtn" @click="changeMenu"> ? ?<text v-if="!menushow"> ?? ??? ??? ??? ?菜單 ? ? ? ?</text> ? ? ? ?<text v-if="menushow"> ?? ??? ??? ??? ?隱藏 ? ? ?</text> </view>
1.1. 按鈕樣式
核心是通過(guò)position將控件修改為絕對(duì)定位，然后通過(guò)width、height、light、bottom控制組件大小及位置
.floatbtn {
?? ??? ?background-color: #007AFF;
?? ??? ?color: #fff;
?? ??? ?width: 30rpx;
?? ??? ?height: 30rpx;
?? ??? ?position: fixed;
?? ??? ?right: 0;
?? ??? ?bottom: 0;
?? ??? ?z-index: 99999;
?? ??? ?border-radius: 120rpx 0rpx 0 0rpx;
?? ??? ?display: flex;
?? ??? ?flex-direction: row;
?? ??? ?justify-content: flex-end;
?? ??? ?align-items: flex-end;
?? ??? ?padding: 15rpx;
?}1.2. 按鈕事件
這里就比較簡(jiǎn)單， 點(diǎn)擊按鈕時(shí)直接修改menushow就可以了
changeMenu() {
? ? ? this.menushow = !this.menushow
?},二、繪制菜單項(xiàng)
菜單由menushow控制顯示 并且增加mask作為遮罩層 ，點(diǎn)擊遮罩層隱藏菜單項(xiàng)
<view v-if="menushow" class="menuarea"> ? //顯示菜單時(shí)的遮罩層 ， 點(diǎn)擊除了菜單外的遮罩層關(guān)閉菜單顯示 ? ? ? ? ?<view class="mask" @click="changeMenu"> ?? ??? ??? ??? ?</view> ?? ??? ??? ??? ?<view class="menulist"> ?? ??? ??? ??? ??? ?<view class="" @click="m1"> ?? ??? ??? ??? ??? ??? ?菜單1 ?? ??? ??? ??? ??? ?</view> ?? ??? ??? ??? ??? ?<view class="" @click="m2"> ?? ??? ??? ??? ??? ??? ?菜單2 ?? ??? ??? ??? ??? ?</view> ?? ??? ??? ??? ??? ?<view class="" @click="m3"> ?? ??? ??? ??? ??? ??? ?菜單3 ?? ??? ??? ??? ??? ?</view> ? ? ?</view> </view>
2.1 菜單樣式
?.menuarea {
?? ??? ?width: 100%;
?? ??? ?height: 100%;
?? ?}
?? ?.mask {
?? ??? ?position: fixed;
?? ??? ?width: 100%;
?? ??? ?height: 100%;
?? ??? ?z-index: 88888;
?? ??? ?background-color: #3B414433;
?? ?}
?? ?.menulist {
?? ??? ?position: fixed;
?? ??? ?right: 0;
?? ??? ?bottom: 130rpx;
?? ??? ?width: 40vw;
?? ??? ?height: 300rpx;
?? ??? ?z-index: 99999;
?? ??? ?background-color: #fff;
?? ??? ?display: flex;
?? ??? ?flex-direction: column;
?? ??? ?justify-content: space-around;
?? ?}
?? ?.menulist view {
?? ??? ?padding-left: 20rpx;
?? ??? ?border-bottom: 1px solid #88888833;
?? ??? ?height: 100rpx;
?? ??? ?line-height: 100rpx;
?? ?}菜單事件
changeMenu() {
? ? ?this.menushow = !this.menushow
? },完整代碼
<template>
?? ?<view>
?? ??? ?<view class="floatbtn" @click="changeMenu">
?? ??? ??? ?<text v-if="!menushow">
?? ??? ??? ??? ?菜單
?? ??? ??? ?</text>
?? ??? ??? ?<text v-if="menushow">
?? ??? ??? ??? ?隱藏
?? ??? ??? ?</text>
?? ??? ?</view>
?? ??? ??? ?<view v-if="menushow" class="menuarea">
?? ??? ??? ??? ?<view class="mask" @click="changeMenu">
?? ??? ??? ??? ?</view>
?? ??? ??? ??? ?<view class="menulist">
?? ??? ??? ??? ??? ?<view class="" @click="m1">
?? ??? ??? ??? ??? ??? ?菜單1
?? ??? ??? ??? ??? ?</view>
?? ??? ??? ??? ??? ?<view class="" @click="m2">
?? ??? ??? ??? ??? ??? ?菜單2
?? ??? ??? ??? ??? ?</view>
?? ??? ??? ??? ??? ?<view class="" @click="m3">
?? ??? ??? ??? ??? ??? ?菜單3
?? ??? ??? ??? ??? ?</view>
?? ??? ??? ??? ?</view>
?? ??? ??? ?</view>
?? ?</view>
</template>
<script>
?? ?export default {
?? ??? ?onLoad(options) {
?? ??? ?},
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?menushow: false,
?? ?}
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?changeMenu() {
?? ??? ??? ??? ?this.menushow = !this.menushow
?? ??? ??? ?},
?? ??? ??? ?m1(){
?? ??? ??? ??? ?console.log('點(diǎn)擊了m1')
?? ??? ??? ?},
?? ??? ??? ?m2(){
?? ??? ??? ??? ?console.log('點(diǎn)擊了m2')
?? ??? ??? ?},
?? ??? ??? ?m3(){
?? ??? ??? ??? ?console.log('點(diǎn)擊了m3')
?? ??? ??? ?}
?? ??? ?}
?? ?}
</script>
<style>
?? ?.floatbtn {
?? ??? ?background-color: #007AFF;
?? ??? ?color: #fff;
?? ??? ?width: 100rpx;
?? ??? ?height: 100rpx;
?? ??? ?position: fixed;
?? ??? ?right: 0;
?? ??? ?bottom: 0;
?? ??? ?z-index: 99999;
?? ??? ?border-radius: 120rpx 0rpx 0 0rpx;
?? ??? ?display: flex;
?? ??? ?flex-direction: row;
?? ??? ?justify-content: flex-end;
?? ??? ?align-items: flex-end;
?? ??? ?padding: 15rpx;
?? ?}
?? ?.menuarea {
?? ??? ?width: 100%;
?? ??? ?height: 100%;
?? ?}
?? ?.mask {
?? ??? ?position: fixed;
?? ??? ?width: 100%;
?? ??? ?height: 100%;
?? ??? ?z-index: 88888;
?? ??? ?background-color: #3B414433;
?? ?}
?? ?.menulist {
?? ??? ?position: fixed;
?? ??? ?right: 0;
?? ??? ?bottom: 130rpx;
?? ??? ?width: 40vw;
?? ??? ?height: 300rpx;
?? ??? ?z-index: 99999;
?? ??? ?background-color: #fff;
?? ??? ?display: flex;
?? ??? ?flex-direction: column;
?? ??? ?justify-content: space-around;
?? ?}
?? ?.menulist view {
?? ??? ?padding-left: 20rpx;
?? ??? ?border-bottom: 1px solid #88888833;
?? ??? ?height: 100rpx;
?? ??? ?line-height: 100rpx;
?? ?}
</style>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)電子時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
這幾天在做一個(gè)文件管理的模塊，里面有排序的功能，產(chǎn)品經(jīng)理看了說(shuō)希望能做出更加智能的文件排序功能，就像是win7的名稱排序一樣，主要就是文件名中的數(shù)字會(huì)按大小排序，而不是直接按ascii碼 ,這兩天晚上沒(méi)事，就先寫了這個(gè)排序方法，下個(gè)版本中就可以用上了2010-08-08
詳解處理bootstrap4不支持遠(yuǎn)程靜態(tài)框問(wèn)題
這篇文章主要介紹了詳解處理bootstrap4不支持遠(yuǎn)程靜態(tài)框問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
這篇文章主要介紹了Javascript字符串方法詳解的相關(guān)資料,在平時(shí)工作中經(jīng)常會(huì)用到的，非常不錯(cuò)，需要的朋友可以參考下,希望能夠給你帶來(lái)幫助2021-09-09
JS中的算法與數(shù)據(jù)結(jié)構(gòu)之鏈表(Linked-list)實(shí)例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之鏈表(Linked-list),結(jié)合實(shí)例形式詳細(xì)分析了javascript中鏈表的概念、原理、定義及常用操作技巧,需要的朋友可以參考下2019-08-08
本文給大家分享的是使用純javascript實(shí)現(xiàn)的日歷控件的代碼，筆者也是第一次寫控件，摸索著前行，2015-07-07
圖片格式的JavaScript和CSS速查手冊(cè)...2007-08-08
這篇文章主要介紹了JS判斷字符串包含的方法,可有效的檢測(cè)字符串中是否包含固定字符或子字符串,涉及javascript中indexOf的使用技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細(xì)介紹了bootstrap IE8 兼容性處理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了javascript父子頁(yè)面通訊的實(shí)現(xiàn)方法,實(shí)例分析了javascript針對(duì)父子頁(yè)面通訊的原理與相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07