微信小程序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实现电子时钟

    这篇文章主要为大家详细介绍了原生js实现电子时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • javascript高级的文件目录排序代码

    javascript高级的文件目录排序代码

    这几天在做一个文件管理的模块,里面有排序的功能,产品经理看了说希望能做出更加智能的文件排序功能,就像是win7的名称排序一样,主要就是文件名中的数字会按大小排序,而不是直接按ascii码 ,这两天晚上没事,就先写了这个排序方法,下个版本中就可以用上了
    2010-08-08
  • 详解处理bootstrap4不支持远程静态框问题

    详解处理bootstrap4不支持远程静态框问题

    这篇文章主要介绍了详解处理bootstrap4不支持远程静态框问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Javascript的字符串方法详解

    Javascript的字符串方法详解

    这篇文章主要介绍了Javascript字符串方法详解的相关资料,在平时工作中经常会用到的,非常不错,需要的朋友可以参考下,希望能够给你带来帮助
    2021-09-09
  • JS中的算法与数据结构之链表(Linked-list)实例详解

    JS中的算法与数据结构之链表(Linked-list)实例详解

    这篇文章主要介绍了JS中的算法与数据结构之链表(Linked-list),结合实例形式详细分析了javascript中链表的概念、原理、定义及常用操作技巧,需要的朋友可以参考下
    2019-08-08
  • 纯javascript制作日历控件

    纯javascript制作日历控件

    本文给大家分享的是使用纯javascript实现的日历控件的代码,笔者也是第一次写控件,摸索着前行,
    2015-07-07
  • 图片格式的JavaScript和CSS速查手册

    图片格式的JavaScript和CSS速查手册

    图片格式的JavaScript和CSS速查手册...
    2007-08-08
  • JS判断字符串包含的方法

    JS判断字符串包含的方法

    这篇文章主要介绍了JS判断字符串包含的方法,可有效的检测字符串中是否包含固定字符或子字符串,涉及javascript中indexOf的使用技巧,非常简单实用,需要的朋友可以参考下
    2015-05-05
  • bootstrap IE8 兼容性处理

    bootstrap IE8 兼容性处理

    这篇文章主要为大家详细介绍了bootstrap IE8 兼容性处理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • javascript父子页面通讯实例详解

    javascript父子页面通讯实例详解

    这篇文章主要介绍了javascript父子页面通讯的实现方法,实例分析了javascript针对父子页面通讯的原理与相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07

最新评论