首页 > 其他分享 >前端Vue自定义精美悬浮菜单按钮fab button 可设置按钮背景颜色 菜单按钮展开条目

前端Vue自定义精美悬浮菜单按钮fab button 可设置按钮背景颜色 菜单按钮展开条目

时间:2023-07-04 09:22:26浏览次数:41  
标签:菜单 .. 自定义 悬浮 条目 item 按钮

前端Vue自定义精美悬浮菜单按钮fab button 可设置按钮背景颜色 菜单按钮展开条目,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13321

效果图如下:

cc-suspensionMenu

使用方法


<!-- scrollShow:是否显示滑动到顶悬浮按钮  color:悬浮按钮背景色  iconList:悬浮菜单弹出数组  @click:点击事件-->

<cc-suspensionMenu :scrollShow="scrollShow" colors="#fa436a" :iconList="iconList"

@click="menuClick"></cc-suspensionMenu>

HTML代码实现部分


<template>

<view class="content">

<!-- scrollShow:是否显示滑动到顶悬浮按钮  color:悬浮按钮背景色  iconList:悬浮菜单弹出数组  @click:点击事件-->

<cc-suspensionMenu :scrollShow="scrollShow" colors="#fa436a" :iconList="iconList"

@click="menuClick"></cc-suspensionMenu>

</view>

</template>

<script>

export default {

data() {

return {

colors: '#fa436a',

scrollShow: false, //是否显示悬浮菜单

iconList: [{

name: '搜索',

icon: require('../../static/search.png'),

},

{

name: '客服',

icon: require('../../static/serve.png'),

}

]

}

},

methods: {

menuClick: function(item) {

console.log("点击悬浮按钮条目item = " + JSON.stringify(item.name));

uni.showModal({

title: '点击悬浮按钮条目',

content: "点击悬浮按钮条目item = " + JSON.stringify(item.name)

})

},

}

}

</script>

<style>

.content {

display: flex;

flex-direction: column;

}

</style>

标签:菜单,..,自定义,悬浮,条目,item,按钮
From: https://www.cnblogs.com/ccVue/p/17524782.html

相关文章

  • 前端Vue自定义精美宫格菜单按钮组件 可设置一行展示个数 可设置成九宫格 十二宫格 十
    前端Vue自定义精美宫格菜单按钮组件可设置一行展示个数可设置成九宫格十二宫格十五宫格,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13315效果图如下:cc-categoryMenu使用方法<viewclass="header">十五宫格菜单</view><!--推荐宫......
  • .net core 自定义配置文件
    publicvoidConfigureServices(IServiceCollectionservices){varconfigBuilder=newConfigurationBuilder().SetBasePath(Path.Combine(Directory.GetCurrentDirectory(),"Config")).AddJsonFile(&q......
  • nginx 错误页 指向 自定义页面
    1、安装简易版nginx可参考:https://www.cnblogs.com/fanyann/p/17500960.html以下所有操作均给予上面安装链接的系统版本和软件版本。2、首先,创建你自己的HTML错误页面,例如error.html。3、找到你的nginx.conf,它可能在/usr/local/nginx/conf,/etc/nginx,/usr/local/etc/nginx......
  • 微信小程序uniapp解决真机顶部自定义菜单显示(手机状态栏覆盖)
    1.在data里面加入参数statusBarHeight:uni.getSystemInfoSync().statusBarHeight,//状态栏高度2.对返回按钮处理<!--空出状态栏高度--><view:style="'height:'+statusBarHeight+'px;'"></view><!--返回按钮--><di......
  • react之自定义hooks
    原文合集地址如下,有需要的朋友可以关注本文地址合集地址任何相对独立、复用性强的逻辑,都可以extract为自定义Hook,自定义Hook是一种复用React的状态逻辑的函数。自定义Hook的主要特点是:抽象组件间的状态逻辑,方便复用让功能组件更纯粹,更易于维护自定义Hook可......
  • 关于idea 右键找不到Diagrams 按钮
    问题:idea上找不到Diagrams按钮了解决问题:File>Setting>Plugins,搜索Diagrams ,Enabled,完成。 ......
  • vscode 添加到右键菜单
     WindowsRegistryEditorVersion5.00[HKEY_CLASSES_ROOT\*\shell\VSCode]@="OpenwithCode""Icon"="d:\\MicrosoftVSCode\\Code.exe"[HKEY_CLASSES_ROOT\*\shell\VSCode\command]@="\"d:\\MicrosoftVS......
  • Tkinter Menu菜单 (disable 菜单命令)
    PythonTkinterMenu菜单Menu小部件用于在python应用程序中创建各种类型的菜单(顶级,下拉和弹出)顶级菜单是显示在父窗口标题栏下方的菜单。我们需要创建Menu小部件的新实例,并使用add()方法向其添加各种命令语法可能的选项列表选项描述activebackground窗口小......
  • ES 中文分词器ik及自定义远程词库
    ik分词器安装部署 下载地址:https://github.com/medcl/elasticsearch-analysis-ik注意es和ik分词器的版本匹配.这里下载7.9.3的ik分词器下载完毕之后去es的工作目录的plugins文件夹下新建ik文件夹,将下载下来的ik压缩包解压缩至ik文件夹下,重启e   词库介绍ik分词器主......
  • 自定义MultipleViewResolver
    1.MultipleViewResolver.javaimportjava.util.Locale;importjava.util.Map;importorg.springframework.web.servlet.View;importorg.springframework.web.servlet.ViewResolver;publicclassMultipleViewResolverimplementsViewResolver{privateMap<St......