微信小程序自定义弹窗

提到uniapp自定义弹窗,,估计大部分人第一个想到的都是uni-popup这个弹窗效果,今天也尝试了一下,看到人家的效果图确实好看,但是对我这种不走小程序这条路的人不太友好,,浅浅学了vue,这里介绍一个自定义的弹窗方法。

如果你不想使用 uni-popup 组件来创建自定义弹窗,你可以通过以下步骤手动实现一个基本的自定义弹窗:

1、创建弹窗结构

:在你的页面的 template 中添加一个用于弹窗的容器,这个容器初始时应该是隐藏的。

html 复制代码
<template>
  <view class="mask" v-show="showModal"></view>
  <view class="popup" v-show="showModal">
    <!-- 这里是弹窗内容 -->
    <text class="close-icon" @click="closePopup">X</text>
    <view class="popup-content">
      这里是弹窗内容...
    </view>
    <view class="popup-btns">
      <button @click="confirmAction">确定</button>
      <button @click="cancelAction">取消</button>
    </view>
  </view>
</template>

2、添加样式:

为弹窗和遮罩层添加 CSS 样式,确保它们在页面上正确显示。

css

css 复制代码
<style scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #FFFFFF;
  border-radius: 10px;
  z-index: 1001;
  padding: 20px;
  width: 80%;
}

.close-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
}
</style>

3、控制弹窗显示与隐藏:

在 Vue 实例的 data 中添加一个变量来控制弹窗的显示与隐藏,并在方法中添加打开和关闭弹窗的函数。

javascript 复制代码
<script>
export default {
  data() {
    return {
      showModal: false,
    };
  },
  methods: {
    openPopup() {
      this.showModal = true;
    },
    closePopup() {
      this.showModal = false;
    },
    confirmAction() {
      // 确定按钮的逻辑
      this.closePopup();
    },
    cancelAction() {
      // 取消按钮的逻辑
      this.closePopup();
    },
  },
};
</script>

4、触发弹窗:

你可以在需要的时候(例如点击一个按钮)调用 openPopup 方法来显示弹窗。

html 复制代码
<button @click="openPopup">打开弹窗</button>

通过这种方式,你可以创建一个简单的自定义弹窗,并且可以根据需要进一步自定义样式和行为。这只是一个基础示例,你可以根据具体需求添加动画效果、更复杂的布局和交互逻辑。

相关推荐
计算机徐师兄4 小时前
Java基于SSM框架的互助学习平台小程序【附源码、文档】
小程序·互助学习·互助学习平台小程序·java互助学习微信小程序·互助学习微信小程序·互助学习平台微信小程序
西农小陈6 小时前
Python-基于PyQt5,wordcloud,pillow,numpy,os,sys的智能词云生成器
开发语言·python·小程序·pycharm·numpy·pyqt·pillow
Stanford_11067 小时前
C++中常用的十大排序方法之4——希尔排序
c++·算法·微信小程序·排序算法·微信公众平台·twitter·微信开放平台
说私域8 小时前
开源AI智能名片2+1链动模式S2B2C商城小程序:重塑私域流量运营格局
人工智能·小程序·流量运营
Colinnian11 小时前
微信小程序中在一个大边框里给每个小边框均匀分配空间
微信小程序·小程序·notepad++
一 乐11 小时前
基于微信小程序的酒店管理系统设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·微信小程序·酒店管理系统
说私域1 天前
今日头条公域流量引流新径:开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序融合之道
人工智能·小程序
曾经的三心草1 天前
小程序-基础加强
小程序·基础加强
说私域1 天前
智能调度体系与自动驾驶技术优化运输配送效率的研究——兼论开源AI智能名片2+1链动模式S2B2C商城小程序的应用潜力
人工智能·小程序·自动驾驶
说私域1 天前
开源2+1链动模式AI智能名片S2B2C商城小程序:利用用户争强好胜心理促进分享行为的策略研究
人工智能·小程序·开源