微信小程序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>

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

(0)

相关推荐

  • 微信小程序 仿美团分类菜单 swiper分类菜单

    有同学要仿美团分类菜单.写了一个. 跟 微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换很类似 代码: js就这么一点 //index.js //获取应用实例 var app = getApp() Page({ data: { currentTab: 0, grids: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], swiperList:[0, 1, 2, 3, 4] }, onLoad: function () { }, click: function (e) {

  • 微信小程序实现单列下拉菜单效果

    接下来我想做的是一个下拉菜单用来分类的,但是在网上搜了一下,基本上全都是比较复杂的分类菜单,最简单的也是分三列的下拉菜单,但是并不想要这么复杂的,最后找了一个三列的,改成了单列.也把代码尽可能的简单化了. 实现的效果图: 合并状态: 首先下面是目录结构:  下面是实现的具体代码: .wxml <!--选择框--> <view class="product-list"> <!--条件选择--> <view class="choice-b

  • 微信公众号菜单配置微信小程序实例详解

    先提条件是你的公众号版定了小程序 第一种:直接配置     第二张:代码配置 1.进入在线接口调试工具        2.选择自定义菜单 菜单body为json格式: { "button": [ { "type": "miniprogram", "name": "合作", "url": "http://form.mikecrm.com/2xb9aT", "a

  • 微信小程序 特效菜单抽屉效果实例代码

    实现效果图: 抽屉菜单是app上常见的菜单设计方式,典型的抽屉菜单如下图所示 下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示: 页面包含一个主页和抽屉菜单页,为了实现滑动效果,页面采用absolute布局,代码如下 index.wxml <view id='id-main-page' class='main-page' animation='{{animationData}}' style='left:{{mainPageLeft}}rpx;' bindtouchstart='onM

  • 微信小程序实现下拉菜单切换效果

    本文实例为大家分享了微信小程序实现下拉菜单切换展示的具体代码,供大家参考,具体内容如下 效果图: wxml: <!-- 下拉菜单 --> <view id="swiper-tab"> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"

  • 微信小程序 下拉菜单的实现

    微信小程序 下拉菜单 看下实现效果图: 实例: //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-botto

  • 微信小程序实现弹出菜单功能

    需求 点击标签栏按钮,向下弹出菜单,再次点击,收回菜单 要解决的问题 标签栏三栏样式,标签栏固定不动: 点击标签栏弹出菜单,并且出现透明遮罩: 遮罩优先级在弹出框之下: 弹出框内标签的设置: 滚动栏滚动条的隐藏 如何解决? 弹性布局,横向,三者平分整栏; 状态监听点击事件,数据控制hide或者show,通过rgba设置透明度 弹出框设置z-index: 弹性布局flex 横向排列 超出后wrap 然后space-around控制间距 ::-webkit-scrollbar { width: 0;

  • 微信小程序 下拉菜单简单实例

    微信小程序 下拉菜单简单实例 wcss  /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px sol

  • 微信小程序左滑动显示菜单功能的实现

    效果图如下所示: view <view class="page"> <!--下层左侧导航--> <view class="page-bottom"> <view class="page-content"> <view class="userinfo"> <view class="userImg"> <image src='/ima

  • 微信小程序实现的点击按钮 弹出底部上拉菜单功能示例

    本文实例讲述了微信小程序实现的点击按钮 弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml <button type="default" bindtap="actionSheetTap">弹出action sheet</button> <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindch

随机推荐