当前位置: 首页 > 编程日记 > 正文

微信小程序自定义弹出框组件,模拟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;
}

js

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() {}})},

相关文章:

IOS tableView删除数据

NSMutableArray *_allshops; NSMutableArray *_deleteshops; -(IBAction)remove{ 1. //记录删除的行号 //创建动态数组存放行号的集合 NSMutableArray *deletepath [NSMutableArray array]; //遍历存放删除数据的数组&#xff0c;把行号放到deletepath中 for (Shop * s in _de…

vue.js 源代码学习笔记 ----- 工具方法 lang

/* flow */ // Object.freeze 使得这个对象不能增加属性, 修改属性, 这样就保证了这个对象在任何时候都是空的 export const emptyObject Object.freeze({}) /*** Check if a string starts with $ or _ ascii unicode 的区别 charcodeAt是一个字符的 unicode编码, 但是…

Tim Berners-Lee重新分散的新Web SOLID简介

by Arnav Bansal通过Arnav Bansal Tim Berners-Lee重新分散的新Web SOLID简介 (An introduction to SOLID, Tim Berners-Lee’s new, re-decentralized Web) Recently, Prof. Tim Berners-Lee lifted the veil off a project called Solid. I decided to check it out. In thi…

AngularJS2.0 教程系列(一)

Why Angular2 Angular1.x显然非常成功&#xff0c;那么&#xff0c;为什么要剧烈地转向Angular2&#xff1f; 性能的限制 AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。随着时间的推移&#xff0c;各种特性 被加入进去以适应不同场景下的应用开发。然而由…

Vue组件绑定自定义事件

Vue组件使用v-on绑定自定义事件&#xff1a;   可以分为3步理解&#xff1a;     1.在组件模板中按照正常事件机制绑定事件&#xff1a;       template: <button v-on:click"increment">{{ counter }}</button>,       如上&#xff…

phpstudy本地调试运行TP5的后台源码

本地访问后台步骤&#xff1a; 1.打开 phpstudy 2.点击其它选项菜单 3.点击软件设置 4.点击端口常规设置 5.修改网站根目录为&#xff1a; C:\phpStudy\PHPTutorial\WWW\wxpet_2019\public phpstudy 切换php版本&#xff1a;5.6.27 public目录下的 .htacc…

如何使用TensorFlow Eager执行训练自己的FaceID ConvNet

by Thalles Silva由Thalles Silva Faces are everywhere — from photos and videos on social media websites, to consumer security applications like the iPhone Xs FaceID.人脸无处不在-从社交媒体网站上的照片和视频到iPhone Xs FaceID等消费者安全应用程序。 In this…

jquery判断一个元素是否为某元素的子元素

$(node).click(function(){if($(this).parents(.aa).length > 0){//是aa类下的子节点}else{//不是aa类下的子节点} });在判断点击body空白处隐藏弹出框时用到转载于:https://www.cnblogs.com/qdog/p/7067909.html

Sublime Text 3 (含:配置 C# 编译环境)

Sublime Text 3http://www.sublimetext.com/3http://www.sublimetext.com/3dev1. 关闭自动更新 菜单&#xff1a;Preferences->Settings User&#xff0c;打开User配置文档&#xff0c;在大括号内加入&#xff08;或更改&#xff09;&#xff1a; "update_check&q…

小程序仿安卓动画滑动效果滑动动画效果实现

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 效果图&#xff1a; 源码 var start_clientY; //记录当前滑动开始的值 var end_clientY; //记录当前滑动结束的值 var animation wx.createAnimation({duration: 400 }); //初始化动画var history_dis…

react中使用scss_我如何将CSS模块和SCSS集成到我的React应用程序中

react中使用scssby Max Goh由Max Goh 我如何将CSS模块和SCSS集成到我的React应用程序中 (How I integrated CSS Modules with SCSS into my React application) I recently started on an Isomorphic React project. I wanted to use this opportunity to utilize tools that …

-bash:syntax error near unexpected token '('

在Xshell5中编写int main(int argc,char** argv)时&#xff0c; 出现-bash:syntax error near unexpected token ( &#xff1b; 可是我是按照Linux语句编写的&#xff0c;其他代码没有出错&#xff1b; 检查发现&#xff0c; Xshell5对应的Linux版本是Linux5&#xff0c;在Li…

iOS手机 相册 相机(Picker Write)

把图片写到相册UIImageWriteToSavedPhotosAlbum(<#UIImage *image#>, nil, nil, nil); ————————————————————————————从相册&#xff0c;相机获取图像设置代理《UINavigationControllerDelegate, UIImagePickerControllerDelegate》 #pragm…

php删除指定对象的属性及属性值

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 unset($address[/Api/User/addAddress]); 删除了 address 对象的 /Api/User/addAddress 属性

前端分离的前端开发工具_使我成为前端开发人员工作的工具和资源

前端分离的前端开发工具Learning front-end development can be a bit overwhelming at times. There are so many resources and tools, and so little time. What should you pick? And what should you focus on?有时&#xff0c;学习前端开发可能会有些困难。 资源和工具…

C# 开启及停止进程

1.本篇内容转发自http://www.cnblogs.com/gaoyuchuanIT/articles/2946314.html 2. 首先在程序中引用: System.Diagnostics; 3. 开启进程: /// <summary> /// 开启进程 /// </summary> /// <param name"aProPath&quo…

COJN 0575 800601滑雪

800601滑雪难度级别&#xff1a;B&#xff1b; 运行时间限制&#xff1a;1000ms&#xff1b; 运行空间限制&#xff1a;51200KB&#xff1b; 代码长度限制&#xff1a;2000000B 试题描述Michael喜欢滑雪百这并不奇怪&#xff0c; 因为滑雪的确很刺激。可是为了获得速度&#xf…

JS删除数组指定下标并添加到数组开头

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 代码 let id e.currentTarget.dataset.idlet arrays ;let items this.data.itemsfor (let i 0; i < this.data.items.length; i) {if (id this.data.items[i].id) {arrays items.splice(i, 1)i…

scala akka_如何对Scala和Akka HTTP应用程序进行Docker化-简单的方法

scala akkaby Miguel Lopez由Miguel Lopez 如何对Scala和Akka HTTP应用程序进行Docker化-简单的方法 (How to Dockerise a Scala and Akka HTTP Application — the easy way) Using Docker is a given nowadays. In this tutorial we will how to learn to dockerise our Sca…

Freemarker详细解释

A概念 最经常使用的概念1、 scalars&#xff1a;存储单值字符串&#xff1a;简单文本由单或双引號括起来。数字&#xff1a;直接使用数值。日期&#xff1a;通常从数据模型获得布尔值&#xff1a;true或false&#xff0c;通常在<#if …>标记中使用2、 hashes&#xff1a;…

洛谷P1057 传球游戏(记忆化搜索)

点我进入题目题目大意&#xff1a;n个小孩围一圈传球&#xff0c;每个人可以给左边的人或右边的人传球&#xff0c;1号小孩开始&#xff0c;一共传m次&#xff0c;请问有多少种可能的路径使球回到1号小孩。 输入输出&#xff1a;输入n&#xff0c;m&#xff0c;输出路径的数量。…

微信小程序 自定义导航栏,只保留右上角胶囊按钮

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 navigationStyle 导航栏样式&#xff0c;仅支持以下值&#xff1a;default 默认样式custom 自定义导航栏&#xff0c;只保留右上角胶囊按钮 在 app.json 的 window 加上 "navigationStyle":…

azure多功能成像好用吗_如何使用Azure功能处理高吞吐量消息

azure多功能成像好用吗Authored with Steef-Jan Wiggers, Azure MVP.由Azure MVP Steef-Jan Wiggers撰写。 With Microsoft Azure, customers will push all types of workloads to its services. Workloads are ranging from datasets for Machine Learning purposes to a la…

document.all使用

document.all 一个. document.all它是在页面中的所有元素的集合。例如&#xff1a; document.all(0)一个元素 二. document.all能够推断浏览器是否是IE if(document.all) { alert("is IE!"); } 三. 也能够通过给某个元素设置id属性&#xff08;id…

微信小程序动画无限循环 掉花

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 动画效果 源码 <!-- 动画 --><block wx:if"{{donghua}}"><view classdonghua><image bindtaphua styleleft:{{left1}}px animation"{{animationData1}}" clas…

程序员远程办公_如何从办公室变成远程程序员

程序员远程办公by James Quinlan詹姆斯昆兰(James Quinlan) My name is James, and I’m a Software Engineer at a company called Yesware, based in Boston. Yesware is the fourth job I’ve had in which I’m paid to write code, but it’s the third time now that I’…

从头学起androidlt;AutoCompleteTextView文章提示文本框.十九.gt;

文章提示可以很好的帮助用户输入信息&#xff0c;以方便。在Android它也设置有类似特征&#xff0c;而要实现这个功能需要依靠android.widget.AutoCompleteTextView完毕&#xff0c;此类的继承结构例如以下&#xff1a; java.lang.Object↳ android.view.View↳ android.widget…

微信小程序动态设置 tabBar

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 使用微信提供的API wx.setTabBarItem(Object object) 动态设置 tabBar 某一项的内容 参数 Object object 属性类型默认值必填说明indexnumber 是tabBar 的哪一项&#xff0c;从左边算起textstring 否…

NodeJS入门--环境搭建 IntelliJ IDEA

NodeJS入门–环境搭建 IntelliJ IDEA 本人也刚开始学习NodeJS&#xff0c;所以以此做个笔记&#xff0c;欢迎大家提出意见。 1、首先 下载安装NodeJS&#xff0c;下载安装IntelliJ IDEA2、接下来我们详细介绍在IDEA中配置NodeJS 默认安装好了IDEA&#xff0c;在IDEA的file ->…

如何使用React.js和Heroku快速实现从想法到URL的转变

by Tom Schweers由汤姆史威士(Tom Schweers) 如何使用React.js和Heroku快速实现从想法到URL的转变 (How to go from idea to URL quickly with React.js and Heroku) When I was first starting out as a developer, the one thing that I wanted to do was get a web applica…