微信小程序uniapp添加悬浮菜单的方法

更新时间：2022年04月18日 08:58:42 作者：可口可乐加冰

这篇文章主要为大家详细介绍了微信小程序uniapp添加悬浮菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序uniapp添加悬浮菜单的具体代码，供大家参考，具体内容如下

在项目中可能会有一些页面需要加一个悬浮按钮，提供一些额外的菜单
本项目通过uniapp来演示如何将一个按钮悬浮在页面右下角
有需要的话需要把view标签替换成div

效果：

想直接看全部代码不想看各种逼逼叨叨的请直接翻到最下边。。

一、绘制按钮

通过menushow来控制显示内容，显示菜单时按钮文字变为”隐藏“

<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. 按钮事件

这里就比较简单，点击按钮时直接修改menushow就可以了

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

二、绘制菜单项

菜单由menushow控制显示并且增加mask作为遮罩层，点击遮罩层隐藏菜单项

<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>

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('点击了m1')
            },
            m2(){
                console.log('点击了m2')
            },
            m3(){
                console.log('点击了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

原生js实现电子时钟
这篇文章主要为大家详细介绍了原生js实现电子时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
javascript高级的文件目录排序代码
这几天在做一个文件管理的模块，里面有排序的功能，产品经理看了说希望能做出更加智能的文件排序功能，就像是win7的名称排序一样，主要就是文件名中的数字会按大小排序，而不是直接按ascii码 ,这两天晚上没事，就先写了这个排序方法，下个版本中就可以用上了
2010-08-08
详解处理bootstrap4不支持远程静态框问题
这篇文章主要介绍了详解处理bootstrap4不支持远程静态框问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Javascript的字符串方法详解
这篇文章主要介绍了Javascript字符串方法详解的相关资料,在平时工作中经常会用到的，非常不错，需要的朋友可以参考下,希望能够给你带来帮助
2021-09-09
JS中的算法与数据结构之链表(Linked-list)实例详解
这篇文章主要介绍了JS中的算法与数据结构之链表(Linked-list),结合实例形式详细分析了javascript中链表的概念、原理、定义及常用操作技巧,需要的朋友可以参考下
2019-08-08
纯javascript制作日历控件
本文给大家分享的是使用纯javascript实现的日历控件的代码，笔者也是第一次写控件，摸索着前行，
2015-07-07
图片格式的JavaScript和CSS速查手册
图片格式的JavaScript和CSS速查手册...
2007-08-08
JS判断字符串包含的方法
这篇文章主要介绍了JS判断字符串包含的方法,可有效的检测字符串中是否包含固定字符或子字符串,涉及javascript中indexOf的使用技巧,非常简单实用,需要的朋友可以参考下
2015-05-05
bootstrap IE8 兼容性处理
这篇文章主要为大家详细介绍了bootstrap IE8 兼容性处理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
javascript父子页面通讯实例详解
这篇文章主要介绍了javascript父子页面通讯的实现方法,实例分析了javascript针对父子页面通讯的原理与相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07