微信小程序自定义模态框，官方版本与自定义可扩展版本

提示：文章最后有源码，可自取
文章主要通过模仿官方的模态框进行自定义模态框的设计，我将会先讲述原理，然后给出源码，最后指出一些需要注意的地方

提示：文章是自己开发过程中根据自己的理解所写，可能有错误的地方，欢迎指出

文章目录

微信小程序自定义模态框，官方版本与自定义可扩展版本
前言
一、实现思路
二、相关代码
- 1.index.wxml
- 2.index.wxss
- 3.index.js
总结

前言

在进行微信小程序开发的时候，我们经常会使用模态框，而官方自带的模态框对于有些场景来说，由于其限制导致满足不了需求，这时候就需要我们自定义模态框。

一、实现思路

模态框是通过点击后显示的让用户进行操作的组件，它主要实现的功能有：

点击后显示模态框主题，背景黑色半透明，同时固定
点击模态框操作后做出相应的操作
点击半透明区域后隐藏

核心代码思路：
wxml：使用wx:if="{{remark_show}}"判断是否显示模态框，同时根据事件冒泡来获取点击事件来源，也可以写多几个函数，不过写在一个函数里面更像一个主体
wxss：通过固定定位position: fixed;以及background-color: rgb(0,0,0,0.5);实现半透明，注意这里不能使用opacity，不然文字也会半透明
js：这里并没有太多特殊的地方，是比较基本的写法，有需要注意的地方已经注释了

二、相关代码

1.index.wxml

<button class="btn_test" type="primary" bindtap="showModel2">官方弹框接口</button>
<button class="btn_test" type="primary" bindtap="showModel">自定义弹框</button><block wx:if="{{remark_show}}"><view class="mo_cont" bindtap="{{modelOprate}}" data-type="modelOut"><view class="mo_body"><view class="mo_title">模态框标题</view><view class="mo_content mo_padding"><input bindinput="{{modelOprate}}" placeholder="请输入内容" value="{{content}}" class="mo_content_input"/></view><view class="mo_content_oprate"><button class="mo_btn" data-type="cancel">取消</button><button class="mo_btn" data-type="sure">确定</button></view></view></view>
</block>

2.index.wxss


.btn_test {margin-top: 300rpx;
}
/* 模态框样式 */
.mo_cont {position: fixed;background-color: rgb(0,0,0,0.5);top: 0;left: 0;min-height: 100vh;width: 100vw;z-index: 100;text-align: center;display: flex;flex-direction: column;align-items: center;
}
.mo_body {width: 623rpx;border-radius: 32rpx;margin: auto;background-color: #fff;padding: 64rpx;box-sizing: border-box;
}
.mo_title {color: #84A6DD;font-size: large;margin: 16rpx 8rpx;
}
.mo_content {text-align: left;margin-bottom: 16rpx;
}
.mo_content_oprate {display: flex;
}
.mo_content_input {border: 1rpx solid #84A6DD;padding: 16rpx;margin: 32rpx;
}

3.index.js

// index.jsPage({data: {remark_show:false,//控制模态框的显示，true为显示，false不显示modelOprate:"modelOprate",//用字符串方式进行函数调用，实现点击事件的消除（字符串为空）},showModel(){//改变remark_show的值，同时渲染到页面this.setData({remark_show:true})},modelOprate(e){console.log(e);//通过打印查找需要的信息let type = e.type;let btnType = e.target.dataset.type;//按钮的点击选择console.log(type,btnType);//确认找到的信息if(btnType=="modelOut") {this.setData({remark_show:false});return;}if(type=="input"){this.data.content = e.detail.value;//这里不需要渲染，因为输入框的内容已经改变return;}if(btnType!=null){if(btnType=="sure"){console.log("点击了确定");console.log("输入框的内容是："+this.data.content);}else if(btnType=="cancel"){console.log("点击了取消");}this.setData({remark_show:false})}},//使用官方接口的方式showModel2(){wx.showModal({title: '模态框标题',placeholderText:"请输入内容",//有字数限制editable: true,success: (res) => {//使用箭头函数，不然this的指向有问题if (res.confirm) {console.log("点击了确定");console.log("输入框的内容是："+res.content);}else if(res.cancel){//官方建议不使用复杂逻辑console.log("点击了取消");}}})}
})

总结

文章中觉得需要细化的地方或者错误也可以提出哦，感谢观看，觉得不错点个赞呗！

微信小程序自定义模态框，官方版本与自定义可扩展版本相关推荐

微信小程序分享朋友圈官方支持哪些方面（最新版本）
微信小程序分享朋友圈官方支持哪些方面? 1.微信小程序分享朋友圈支持单页模式,具体单页模式的详细说明可参考官方文档,文档链接为:微信小程序单页模式 2. 微信小程序分享朋友圈如果是自定义页面路径的话, ...
微信小程序radio单选框如何修改宽高及选中样式
之前写过关于多选框设置样式的办法,其实与单选框设置的方法一样,唯一不同的是,在css样式里,/* 选中后的背景样式 (红色背景无边框可根据UI需求自己修改) */的下面定义的css需要加上!im ...
微信小程序页面搜索框查询（无后台接口情况下）
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
微信小程序获取用户手机号--官方示例
微信小程序获取用户手机号–官方示例 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNu ...
微信小程序radio单选框
微信小程序radio单选框效果: 选中男返回male,选中女返回female wxml: <radio-group bindchange="handlechange"> ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
微信小程序电话号码input框的正则校验
微信小程序电话号码input框的正则校验 1.wxml <view class="mobile"><sapn c ...
原生微信小程序，搜索框（search）组件
原生微信小程序,搜索框(search)组件首先创建组件及两个跳转页面,第一个是搜索框所在的页面(首页),第二个是搜索详细页搜索框的本质是:搜索框不是input,而是navigate,跳转到专门的搜 ...
微信小程序顶部搜索框滑动伸缩效果的实现
项目场景:微信小程序顶部搜索框随页面滑动伸缩效果提示:实现搜索框跟随用户滑动页面,实现伸缩效果微信小程序顶部搜索框滑动伸缩动画的实现实现效果: 滑动前滑动后实现原理提示:主要用到了微信小 ...

微信小程序自定义模态框，官方版本与自定义可扩展版本

微信小程序自定义模态框，官方版本与自定义可扩展版本

文章目录

前言

一、实现思路

二、相关代码

1.index.wxml

2.index.wxss

3.index.js

总结

微信小程序自定义模态框，官方版本与自定义可扩展版本相关推荐

最新文章

热门文章