微信小程序uniapp添加懸浮菜單的方法

更新時間：2022年04月18日 08:58:42 作者：可口可樂加冰

這篇文章主要為大家詳細(xì)介紹了微信小程序uniapp添加懸浮菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序uniapp添加懸浮菜單的具體代碼，供大家參考，具體內(nèi)容如下

在項(xiàng)目中可能會有一些頁面需要加一個懸浮按鈕，提供一些額外的菜單
本項(xiàng)目通過uniapp來演示如何將一個按鈕懸浮在頁面右下角
有需要的話需要把view標(biāo)簽替換成div

效果：

想直接看全部代碼不想看各種逼逼叨叨的請直接翻到最下邊。。

一、繪制按鈕

通過menushow來控制顯示內(nèi)容，顯示菜單時按鈕文字變?yōu)?rdquo;隱藏“

<view class="floatbtn" @click="changeMenu">
? ?<text v-if="!menushow">
?? ??? ??? ??? ?菜單
? ? ? ?</text>
? ? ? ?<text v-if="menushow">
?? ??? ??? ??? ?隱藏
? ? ?</text>
</view>

1.1. 按鈕樣式

核心是通過position將控件修改為絕對定位，然后通過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. 按鈕事件

這里就比較簡單，點(diǎn)擊按鈕時直接修改menushow就可以了

changeMenu() {
? ? ? this.menushow = !this.menushow
?},

二、繪制菜單項(xiàng)

菜單由menushow控制顯示并且增加mask作為遮罩層，點(diǎn)擊遮罩層隱藏菜單項(xiàng)

<view v-if="menushow" class="menuarea">
? //顯示菜單時的遮罩層 ， 點(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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: