微信小程序自定义弹出框组件，模拟wx.showModal

微信小程序开发交流qq群 173683895

效果图：

代码

wxml

<view wx:if='{{showModal}}'><view class='mask_layer' bindtap='modal_click_Hidden' /><view class='modal_box'><view class="title">取消订单</view><view class='content'><text class='modalMsg'></text><textarea class='input_show1' bindinput='changeCancelReason' auto-height value='{{modalMsg}}' bindfocus='bindfocus' bindblur='bindblur' placeholder='{{modalMsg_placeholder}}'></textarea></view><view class='btn1'><view bindtap='modal_click_Hidden' class='cancel'>取消</view><view bindtap='Sure' class='Sure'>确定</view></view></view>
</view>

css

.mask_layer {width: 100%;height: 100%;position: fixed;z-index: 999;
left:0;top:0;background: #000;opacity: 0.5;overflow: hidden;
}
.modal_box {width: 76%;overflow: hidden;position: fixed;top: 50%;left: 0;z-index: 1001;background: #fafafa;margin: -150px 12% 0 12%;border-radius: 3px;
}.title {padding: 15px;text-align: center;background-color: gazure;
}.content {overflow-y: scroll; /*超出父盒子高度可滚动*/
}.input_show1{margin: 0 auto;width: 80%;margin-left: 10%;font-size: 32rpx;text-align: center;}
.btn1 {width: 100%;margin-top: 65rpx;display: flex;flex-direction: row;align-items: center;justify-content: space-between;box-sizing: border-box;background-color: white;
}.cancel {width: 100%;padding: 10px;text-align: center;color: black;
}.Sure {width: 100%;padding: 10px;color: #44b549;background-color: white;border-left: 1px solid #d0d0d0;text-align: center;
}.modalMsg {text-align: center;margin-top: 45rpx;display: block;
}

showCancelOrder: function() {this.setData({showModal:true})},modal_click_Hidden: function () {this.setData({showModal: false,})},// 确定Sure: function () {console.log(this.data.text)if (this.data.cancelReason==''){wx.showToast({title: '请填写订单取消原因',icon:'none'})return}else{// 提交到后端this.cancelOrder();}},changeCancelReason: function(e) {this.setData({cancelReason: e.detail.value})},cancelOrder: function() {var token = wx.getStorageSync('token');var that = this;util.POST({params: {'token': token,'id': this.data.order.id,'cancel_reason': this.data.cancelReason},API_URL: 'Doctor/cancelOrder',success: (res) => {res = res.data;if (res.code == 200) {wx.showToast({title: res.msg,icon: 'success',duration: 2000})setTimeout(function() {that.getOrderDetails();}, 2000)} else {wx.showToast({title: res.msg,icon: 'none',duration: 2000})}that.setData({showModal: false})},fail: function() {}})},

微信小程序自定义弹出框组件，模拟wx.showModal相关推荐

微信小程序自定义弹出框
网上搜了一下感觉都没有好用的自定义弹框就自己手写了一个,方便以后CV 弹框可以点击按钮关闭,也可以点击空白关闭代码很简单 wxml <view bindtap="submit&quo ...
微信小程序vantweapp-Dialog弹出框提交表单，并还原确定按钮样式
vantweapp中Dialog弹出框使用组件调用,怎么将form表单的提交按钮与Dialog弹出框相结合呢解决方案: wxml代码 <van-dialoguse-slottitle=&quo ...
微信小程序自定义弹出模态框禁止底部滚动
图示: wxml代码: <view class='fix_bottom'> <view>分享</view> <view>电话咨询</view> ...
微信小程序—自定义弹出式键盘（车牌键盘、十六进制键盘），可快速定义不同场景键盘
摘要小程序input组件提供的键盘有四种(text-文本.number-数字.idcard-身份证.digit-小数点),但输入场景万千,很多情况下都需要排除不必要的干扰,比如车牌输入.色值输入,或 ...
微信小程序点击按钮弹出弹窗_微信小程序开发弹出框实现方法
本文主要和大家分享微信小程序开发弹出框实现方法,本文所分享的代码很清晰,希望能帮助到大家. 消息提示框模态弹窗操作菜单 1.消息提示--wx.showToast(OBJECT) //show.js ...
微信小程序 select 下拉框组件
一.源码地址 GitHub - imxiaoer/WeChatMiniSelect: 微信小程序 select 下拉框组件二.效果图录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. ...
微信小程序自定义弹框组件
话不多说直接上代码目录 1.wxml 2.js 3.wxss 4.json 5.效果展示(具体内容可以自定义) 1.wxml <!--pages/components/confirmBox/c ...
微信小程序——自定义下拉框
微信小程序本身并没有自带的下拉框组件,我们可以通过view标签自定义一个下拉框.(仅供参考) 目录文件目录实现效果实现逻辑设置数据设置默认选项实现弹出下拉框提供选项值设置所选值源码 ...
微信小程序无法弹出授权登录窗口
微信小程序开发,小程序接口问题..... 今天在写微信小程序的时候,为了获取到后台的token,必须要获取到code,encryptedData,iv ,rawData,signature五个值.co ...

微信小程序自定义弹出框组件，模拟wx.showModal

微信小程序自定义弹出框组件，模拟wx.showModal相关推荐

最新文章

热门文章