微信小程序自定义全局组件showModal

最新推荐文章于 2024-09-09 14:49:05 发布
置顶 最新推荐文章于 2024-09-09 14:49:05 发布
阅读量1.3k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 微信小程序开发实际功能 文章标签： 微信小程序 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/dreamimport/article/details/129128927
本文介绍如何在微信小程序中创建一个自定义全局组件NavModal，以替代默认的showModal样式，并通过eventBus实现数据和事件的监听。详细步骤包括组件的创建、event.js的编写、在app.js和app.json中的引入，以及在页面底部引入组件。

开发过程中微信提供的showmodal样式不符合ui风格，又不想写成组件用的页面都引入，就考虑模拟showmodal写一个自定义的弹框组件

一，在components中新建一个navModal组件
navModal.wxml

<view class="modal_mask" hidden='{
   
   {hidden}}'>
  <view class="modal_body">
    <view class
了解本专栏 订阅专栏 解锁全文 超级会员免费看
微信小程序 --- 通用模块封装（showToast，showModal ，本地存储）
每天都要努力学习哦~~
02-21 4330
在小程序中，经常需要将一些数据存储到本地，方便多个页面的读取使用，例如：将用户的登录状态、用户的个人信息存储到本地。如果直接使用这些 API，会比较麻烦，通常情况下，我们需要对本地存储的方法进行封装。同时，我们在后续还会进行网络通用模块的封装，如果直接进行封装难度比较大，在进行项目开发的时候，我们经常的会频繁的使用到一些 API，进行通过模块的封装，也是为后续 [网络请求封装] 做铺垫。，会导致代码很冗余，为了减少了代码冗余，我们需要将这些。可以看到封装后方法，极大简化 API 的调用，
微信小程序全局组件的定义
weianl的博客
10-02 3910
项目场景： 在做项目中，当我们写到一些共用的js代码时，为了去耦合实现模块化，会把共用js代码提取出来封装好，哪里需要使用到的引用一下就好了。同理的，在小程序开发中，为了精简化项目，我们可以把共用的一部分代码（比如说登录弹窗、活动状态弹窗等）提取出来，写成组件，需要用到也页面引入一下就好了。 Demo演示： 为了方便演示父页与子组件间的数据传输，我写了个简化版的全局登录弹窗，具体可以看下面的GIF 代码部分： 项目结构： 我们先看下目录的具体结构，一般情况下创建的组件都会放到components文件夹
微信小程序 showModal 自定义showModal.zip
09-25
微信小程序 showModal 自定义showModal.zip
自定义小程序showModal对话框
hjy170314的博客
10-28 510
小程序自定义对话框的书写 html部分 <view class="modal-mask" bindtap="hideModalC" wx:if="{{showModelConflict}}"></view> <view class="modal-dialog" wx:if="{{showModelConflict}}"> <view class="modal-title">弹窗标题</view> <view
微信小程序 -实现自定义弹窗组件(modal模态框)
最新发布
Jiaberrr的博客
09-09 2893
微信小程序自带的弹窗是wx.showModal，但是我发现它扩展能力有限，并不能满足自定义的需求，所以用 css + js封装了一个弹窗组件，效果图如下，附源码。
小程序自定义showModal弹框
weixin_43831302的博客
01-10 1596
纯属练习组件化 组件wxml页面代码如下 <view class='shade' hidden='{{popup}}' ></view> <view class='shade_box popup {{frameAnimate}}' hidden='{{popup}}'> <view class='content'>{{ title }}&l...
微信小程序Toast自定义组件
08-10
微信小程序 Toast 自定义组件是开发者为了提供更灵活、个性化的提示信息展示方式而设计的一种组件。在微信小程序的原生框架中，虽然内置了简单的 Toast 功能，但其功能有限，仅能显示预设的几种提示类型。因此，通过...
精选资源
微信小程序的刻度尺组件开发，体重计算，页面显示，底部弹窗两种用法
06-01
在微信小程序的开发中，刻度尺组件是一个实用的功能，常用于健康类应用或测量工具类应用中。本文将深入探讨如何开发一个刻度尺组件，同时涉及体重计算、页面显示以及底部弹窗的两种用法。这些知识点对于提升微信小...
微信小程序自定义Toast
Happy__EveryDay的专栏
01-18 3077
实现类似于Android的Toast提示 index.js： var timer; var inputinfo = ""; var app = getApp() Page({ data: { animationData:"", showModalStatus:false }, onLoad: function () { }, showMo
微信小程序：如何在父组件中控制多个子组件的交互
qq_40791475的博客
08-12 1958
在微信小程序开发中，实现父组件与多个子组件之间的交互有多种方式。常见的方法包括使用事件传递机制、全局事件总线、全局状态管理以及直接调用父组件方法。事件传递机制适合简单的父子组件通信，全局事件总线则适合跨组件的松耦合通信，全局状态管理适用于复杂项目的集中状态管理，而直接调用父组件方法则适合简单、耦合度较高的场景。根据项目需求选择合适的方式，可以提高开发效率和代码的可维护性。
微信小程序实现自定义modal弹窗封装的方法
01-03
前言 小程序官方提供了 wx.showModal 方法，但样式比较固定，不能满足多元化需求，自定义势在必行~ 老规矩先上图 点击某个按钮，弹出 modal框，里面的内容可以自定义，可以是简单的文字提示，也可以输入框等复杂布局。操作完点击取消或确定关闭 modal. 如何使用 将下面的 modal.wxml 、modal.wxss 、modal.js 、modal.json 四个文件复制到对应位置即可。 封装完之后调用起来也很简单，看看调用的代码吧 <modal show={{showModal}} height='60%' bindcancel=modalCancel bin
微信小程序UI组件用户首次进入进行添加到我的小程序操作提示
08-10
微信小程序UI组件是微信开发者工具提供的一系列预定义的、用于构建用户界面的元素，它们大大简化了小程序的开发过程。在用户首次进入一个微信小程序时，为了提高用户的留存率和方便他们再次快速访问，通常会引导用户...
微信小程序开发学习笔记——4.2showModal和showLoading界面交互操作
Qy_cm的博客
03-19 4650
>跟着b站up主“咸虾米_”学习中，把学习记录存到这方便后续查找。
UniApp转微信小程序之全局组件
qq_46797048的博客
10-17 2302
微信小程序通过 vue-inset-loader 插件解决 UniApp H5端通过操作Dom树解决
微信小程序提示确认框 wx.showModal
代码小疯子
11-03 3329
核心实现代码如下title 是确认框的标题，content 是确认框显示的内容。用户点击确定按钮时，success 函数会被调用，并且 res.confirm 为 true。用户点击取消按钮时，res.cancel 为 true。
【微信小程序】全局配置
m0_67393593的博客
07-31 444
小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下①pages记录当前小程序所有页面的存放路径②window全局设置小程序窗口的外观③tabBar设置小程序底部的t9abBar效果④style是否启用新版的组件样式String字符串导航栏标题文字内容HexColor#000000导航栏背景颜色，如#000000Stringwhite导航栏标题颜色，仅支持black/whiteHexColor#ffffff设置步骤。...
微信小程序 将一个组件注册为全局公共组件
weixin_45966674的博客
09-04 629
我们可以在小程序 根目录的app.json中设置usingComponents属性来完成。通常我们小程序使用组件 需要在对应使用组件的page的json文件中声明。但可能我们有一些组件 非常多地方用 vue有Vue.use(组件);然后我们将原本page中json的配置删掉。这样他就成立一个项目全局的公共组件了。重新编译 会发现组件依旧能正常使用。这样 他就成立一个公共组件。
微信小程序--wx.showModal
热门推荐
海到无边天作岸 山登绝顶我为峰
02-06 2万+
wx.showModal 显示模态对话框 参数 属性 类型 默认值 必填 说明 title string 否 提示的标题 content string 否 提示的内容 showCancel boolean true 否 是否显示取消按钮 cancelText string ‘取消’ 否 取消按钮的文字，最多 4 个字符 cancelColor string #000000 否 取消按钮的文字颜色，必须是 16 进制格式的颜色字符串 confirmText string
微信小程序 wx.showModal
07-24 1020
微信小程序--wx.showModal_海轰Pro的博客-优快云博客
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值