在现代移动应用开发中，uniapp因其跨平台特性而备受开发者青睐。uniapp允许开发者使用Vue.js开发应用，并且可以编译到iOS、Android、H5以及各种小程序等多个平台。本文将详细介绍如何在uniapp中实现一个常见的交互模式：中间加号点击弹窗功能。这个功能通常用于在APP的主界面上添加一个快捷操作入口，用户点击加号后弹出一个包含多个操作选项的弹窗。
一、准备工作
在开始之前，请确保你已经安装了HBuilderX编辑器，这是开发uniapp的官方推荐IDE。同时，你也需要对Vue.js和uniapp的基础知识有一定的了解，包括组件、事件处理、条件渲染等。
二、创建项目
- 打开HBuilderX，点击“文件”->“新建”->“项目”。
- 选择“uni-app项目”，填写项目名称、项目路径等信息，然后点击“创建”。
三、设计界面
- 在
pages/index/index.vue文件中，我们需要设计一个包含中间加号的界面。可以使用Flex布局来居中显示加号图标。
<template> <view class="container"> <view class="plus-icon" @click="showPopup"> <text class="icon">+</text> </view> </view> </template> <style> .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .plus-icon { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background-color: #eee; font-size: 30px; color: #333; } </style>
四、实现弹窗功能
uniapp提供了uni.showModal方法来显示弹窗，但这个方法主要用于显示简单的确认对话框。为了实现更复杂的弹窗效果，我们可以使用uniapp的组件popup。
1. 在template中添加popup组件
<popup v-model="showPopupModal" position="bottom"> <view class="popup-content"> <!-- 弹窗内容 --> <view class="option" @click="handleOptionClick('Option 1')">Option 1</view> <view class="option" @click="handleOptionClick('Option 2')">Option 2</view> <!-- 更多选项 --> </view> </popup>
2. 在script中定义相关的数据和方法
<script> export default { data() { return { showPopupModal: false, // 控制弹窗的显示与隐藏 }; }, methods: { showPopup() { this.showPopupModal = true; // 显示弹窗 }, handleOptionClick(option) { console.log('User selected:', option); this.showPopupModal = false; // 隐藏弹窗 // 根据用户选择执行相应的操作 }, }, }; </script>
3. 为弹窗添加样式
<style> .popup-content { background-color: #fff; padding: 10px; border-radius: 10px 10px 0 0; } .option { padding: 10px; border-bottom: 1px solid #eee; } .option:last-child { border-bottom: none; } </style>
五、真实案例
- 在HBuilderX中点击运行按钮，选择你想要运行的平台（比如微信开发者工具、Android模拟器等）。
- 在弹出的界面中测试加号点击弹窗功能是否按预期工作。
首先，官方有一个蛋疼的例子，那个例子是中间带加号的例子，想必大家可能也看了，咋说呢？那个例子好在点击中间按钮可以改变按钮的配图，但是页面确要跳转一次，这就很难受了！
1.先去把midButton配置一下。
2.创建subNVues页面
在配置subNVues要注意，下面看我这个注释啊，要注意的地方就是关闭这里。
"app-plus": { "subNVues": [{ "id": "fabuneirong", // 唯一标识 "path": "paltform/app-plus/subNVue/fabuneirong", // 页面路径 "type": "popup", //这里不需要 "style": { "position": "popup", "width": "100%", "height": "430rpx", "bottom": "70rpx", "background":"transparent"//默认是点击遮罩层才关闭弹窗，改成transparent变成了不管点哪都关闭这个subNvuew } }] }
3. 监听midButton的点击事件
这个方法是个蛋疼的方法，一会说，在app.vue里面监听一下
onLaunch() { uni.onTabBarMidButtonTap(function(e){ console.log(e); // 通过 id 获取 nvue 子窗体 const subNVue = uni.getSubNVueById('fabuneirong') // // 打开 nvue 子窗体 subNVue.show('slide-in-bottom', 300, function(){ // 打开后进行一些操作... // }); }) }
这个方法里面竟然没把这个按钮对象给传过来，导致不知道怎么去改变这个加号按钮的样式！这是个很大的问题
这个问题我反应社区了，但是没啥效果啊
4. 完善subNVues这个页面。
5. 这里面要注意个问题就是nvue样式的写法也是个蛋疼的东西。
另外750rpx就是整个屏幕宽度啊，官方就是按照750换算的。
六、优化与扩展
- 你可以根据需要自定义弹窗的样式，包括背景色、文字颜色、边框等。
- 弹窗中的选项可以根据实际业务需求进行扩展，比如添加图标、描述文字等。
- 如果弹窗中的选项较多，可以考虑使用滚动视图来展示。
七、收获
通过本文的介绍，你应该已经掌握了在uniapp中实现中间加号点击弹窗功能的方法。这个功能在很多APP中都非常常见，掌握它的实现方法对于提升用户体验和增加APP的实用性都非常重要。希望本文能对你有所帮助！如果你有任何疑问或建议，欢迎在评论区留言。
