微信小程序自定义模态框

效果展示

可在模态框中添加图片输入框

代码展示-wxml

<button class="show-btn" bindtap="showDialogBtn">弹窗</button><viewclass="modal-mask"bindtap="hideModal"catchtouchmove="preventTouchMove"wx:if="{{showModal}}"></view><!-- 成功 --><view class="modal-dialog" wx:if="{{showModal && ses}}"><view class="modal-img"><image src="/image/indexImg/sesImg.png" mode="widthFix" /></view><view class="modal-title">恭喜你，成功加入班级</view><view class="modal-footer"><viewclass="btn-confirms"bindtap="onConfirm"data-status="confirm"data-name="{{name}}">确定</view></view></view>

代码展示-wxss

    /**index.wxss**/.show-btn {margin-top: 100rpx;color: #22cc22;}.modal-mask {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;opacity: 0.5;overflow: hidden;z-index: 9000;color: #fff;}.modal-dialog {width: 540rpx;overflow: hidden;position: fixed;top: 50%;left: 0;z-index: 9999;background: #f9f9f9;margin: -180rpx 105rpx;border-radius: 8px;}.modal-title {padding-top: 30rpx;padding-bottom: 30rpx;font-size: 14px;color: #030303;text-align: center;}.modal-img {width: 40px;height: 40px;margin: 0 auto;margin-top: 20rpx;image {width: 100%;height: 100%;}}.modal-footer {display: flex;flex-direction: row;height: 86rpx;border-top: 1px solid #dedede;font-size: 34rpx;line-height: 86rpx;}.btn-cancel {width: 50%;color: #8f8f8f;background-color: #f2f2f2;text-align: center;border-right: 1px solid #dedede;}.btn-confirm {width: 50%;color: #8f8f8f;background-color: #f2f2f2;text-align: center;}.btn-confirms {width: 100%;background-color: #f2f2f2;color: #8f8f8f;text-align: center;}

代码展示-js


var app = getApp()
Page({data: {showModal: false,// 成功ses:true,},onLoad: function () {},/*** 弹窗*/showDialogBtn: function () {this.setData({showModal: true})},/*** 弹出框蒙层截断touchmove事件*/preventTouchMove: function () {},/*** 隐藏模态对话框*/hideModal: function () {this.setData({showModal: false});},/*** 对话框取消按钮点击事件*/onCancel: function () {this.hideModal();},/*** 对话框确认按钮点击事件*/onConfirm: function (e) {console.log(e.currentTarget.dataset.name);this.hideModal();}
})

微信小程序自定义模态框相关推荐

微信小程序自定义模态框，官方版本与自定义可扩展版本
微信小程序自定义模态框,官方版本与自定义可扩展版本提示:文章最后有源码,可自取文章主要通过模仿官方的模态框进行自定义模态框的设计,我将会先讲述原理,然后给出源码,最后指出一些需要注意的地方提示: ...
微信小程序自定义搜索框（searchbar）
微信小程序自定义搜索框(searchbar) 样式截图展示: 功能描述:微信小程序页面需要加入搜索框时,可以直接引用到页面中使用,当用户未输入任何关键字时如第一张图所示,当用户输入要搜索的关键字时如第 ...
微信小程序自定义提示框制作的简单方法
微信小程序自定义提示框制作的简单方法下面的时候提示框的结构 wxml部分  <view class="showToast" wx:if= ...
微信小程序自定义弹框组件
话不多说直接上代码目录 1.wxml 2.js 3.wxss 4.json 5.效果展示(具体内容可以自定义) 1.wxml <!--pages/components/confirmBox/c ...
微信小程序自定义搜索框并关键字高亮
效果展示: 实现原理: 一共分为两部分,搜索框.展示面板: 搜索框和展示面板根据业务需求,使用了小程序ui组 tdesign-miniprogram :当然你也可以用原生的输入框做搜索框.差别不大 ...
微信小程序自定义弹框+生成二维码功能
最近在做小程序的功能,需求是弹框生成二维码功能,所以根据需求自定义了一个弹框组件,后续其他地方也可以用到. 最后效果图如下 dialog部分 <!--components/dialog/dial ...
微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...

微信小程序自定义模态框

微信小程序自定义模态框相关推荐

最新文章

热门文章