uniapp中间加号点击弹窗怎么实现？完整教程

球球不吃虾

已于 2024-01-31 09:14:48 修改

阅读量2.1k

点赞数 1

分类专栏： uniapp 文章标签： html5 vue javascript uni-app 前端

于 2021-08-17 16:30:18 首次发布

本文链接：https://blog.csdn.net/qq_32594913/article/details/119759914

版权

uniapp 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

文章目录

一、准备工作
二、创建项目
三、设计界面
四、实现弹窗功能
五、真实案例
六、优化与扩展
七、收获

在这里插入图片描述
在现代移动应用开发中，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(){  
				    // 打开后进行一些操作...  
				    //   
				});  
			})
		}