微信小程序——小程序自己的页面弹框

article/2025/9/21 8:39:36

微信小程序——小程序自己的页面弹框

1. 页面样式:

在这里插入图片描述

2.代码块

在这里插入代码片
(一).wxml文件中给一个触发事件
<image src="../../img/icon-delete.png" bindtap='deleteCar' data-id='{{car.platecard}}'  class="icon"></image>(二).js文件中触发事件打开弹窗——>具体的业务逻辑deleteCar:function(deleteRes){let ts = this;wx.showModal({title: '提示',content: '您确认删除该车辆吗?',success:function(res){if(res.confirm){//调用后台接口——解绑——>成功后提示解绑成功,刷新页面// console.log('删除')// console.log(deleteRes)// console.log((deleteRes._relatedInfo.anchorRelatedText + '').slice('5','-1'))//调用自己封装的http请求e.request('/managementchanel/DeleteCarbind?parkid=' + a.globalData.parkid,{ usr_num: deleteRes.currentTarget.dataset.id,openid:wx.getStorageSync('openid')}, 'POST').then((res) => {console.log(res)if (res.statusCode == '200' && res.data.return_code==='00') {wx.showToast({title: '解绑成功',duration: 2000,success:function(){//成功后刷新页面ts.selectCar()}})               }else{wx.showToast({title: '解绑失败,请重试',icon:'none'})}})}}})},

http://chatgpt.dhexx.cn/article/S4HVWFff.shtml

相关文章

微信小程序底部弹出框

微信小程序的底部弹出框 wxml <!-- 弹出框 start --> <view class"dialog_screen" bindtap"hideModal" wx:if"{{showModalStatus}}"></view> <view animation"{{animationData}}" class"dialog_attr_bo…

【微信小程序】小程序中的各种弹窗API

前言&#xff1a;小程序中提供了很多种快捷方便的弹窗API供开发者使用&#xff0c;例如wx.showToast&#xff0c;wx.showModal&#xff0c;wx.showActionSheet&#xff0c;wx.showLoading还有wxml中的loading标签。 一、直接上代码 <!-- test.wxml --> <view class&q…

小程序带输入框的弹窗

老规矩&#xff0c;直接上代码 <block wx:if"{{isShowConfirm}}"><view classtoast-box><view classtoastbg></view><view classshowToast><view classtoast-title><text>确认支付</text></view><view cla…

微信小程序 自定义弹框组件

话不多说直接上代码 目录 1、wxml 2、js 3、wxss 4、json 5、效果展示&#xff08;具体内容可以自定义&#xff09; 1、wxml <!--pages/components/confirmBox/confirmBox.wxml--> <wxs src"../../../filter/urlFilter.wxs" module"filter"…

微信小程序——点击某个按钮实现下面弹窗的出现

效果图:(真的是图) wxml(代码里面有解释&#xff09; <button type"primary" bindtap"Popup">点我</button> <!--点击后灰色背景的设置--> <view wx:if"{{now_state}}" class"background" bindtap"hideM…

微信小程序实现底部向上弹框

本文转自 作者&#xff1a;smallzip 链接&#xff1a;https://www.jianshu.com/p/bd9a4f4b8e6a 著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 效果 小程序自定义底部弹出modal框组件&#xff0c;仿照小程序sheet-action的效果&#xff0…

uniapp微信小程序的各种弹框提示(轻提示)

您直接复制粘贴即可使用不需要做特殊的处理。 如您满意请给莫成尘点个Fabulous 1&#xff1a; 纯文字提示框 uni.showToast({title: 只有文字弹窗,icon: none, //如果要纯文本&#xff0c;不要icon&#xff0c;将值设为noneduration: 2000 //持续时间为 2秒 }) 2&…

小程序实现弹出输入框

1.微信自带组件 样式&#xff1a; wxml <view class"close" bindtap"close">拒绝</view>js Page({//拒绝close(e) {wx.showModal({editable:true,//显示输入框placeholderText:输入拒绝原因,//显示输入框提示信息success: res > {if (re…

微信小程序提示弹窗大全

wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明&#xff1a; 示例代码&#xff1a; ? 1 2 3 4 5 wx.showToast({ title: 成功 , icon: success , duration: 2000 }) wx.hideToast() 隐藏消息提示框 ? 1 2 3 4 5 6 7 8 9 wx.showToast({ title: 加载中 , icon: lo…

微信小程序 四种弹窗方式

微信小程序弹窗 一、wx.showToast(Object object)二 、wx.showModal(Object object)三、wx.showLoading(Object object)四、wx.showActionSheet(Object object)五、官方文档 一、wx.showToast(Object object) 显示消息提示框 wx.showToast({title: 内容, //提示的内容duration…

微信小程序弹出框详解

[html] view plain copy <span style"font-family:Comic Sans MS;font-size:18px;color:#333333;"><view class"container" class"zn-uploadimg"> <button type"primary"bindtap"showok">消息提示…

微信小程序几种常用弹窗提示

第一种&#xff1a;弹出提示框&#xff0c;可以选择确定或者取消。 代码&#xff1a;wx.showModal({title: 提示,content: 这是一个模态弹窗,success: function (res) {if (res.confirm) {//这里是点击了确定以后console.log(用户点击确定)} else {//这里是点击了取消以后conso…

微信小程序几种常用弹窗提示方法

1.提示文字 可以设置显示时间&#xff08;仅提示时使用&#xff09;duration设置时间 不显示icon&#xff0c;此时 title文字最多可显示两行 也可以显示icon&#xff0c;显示icon文字最多显示 7 个汉字长度 icon常用的有&#xff1a;success、error、loading wx.showToast(…

微信小程序展示弹窗的方式

微信小程序中展示弹窗有四种方式&#xff1a;wx.showToast、wx.showModal、wx.showLoading、wx.showActionSheet 具体参数可参照微信开发文档 1. wx.showToast <!-- index.wxml --> <!-- wx.showToast(消息提示框) --> <button bindtap"handleShowToast&…

微信小程序之弹出框

微信小程序中toast消息提示框只有两种显示的效果&#xff0c;就是成功和加载&#xff0c;使用wx.showToast(OBJECT)。 看下有关参数说明&#xff1a; 代码很简单&#xff1a; wx.showToast({title: 成功,icon: succes,duration: 1000,mask:true}) mask属性好像并没有起作用。有…

微信小程序弹窗

微信小程序自定义底部、顶部、中间、左边、右边弹窗 简单的微信小程序弹窗功能&#xff0c;具体实现过程&#xff0c;请浏览代码。 顶部弹出窗图例&#xff1a; 中间弹出窗图例&#xff1a; 底部弹出窗图例&#xff1a; 左边弹出窗图例&#xff1a; 右边弹出窗图例&#x…

微信小程序弹窗提示怎么写

第一种&#xff1a;弹出提示框&#xff0c;可以选择确定或者取消。 代码&#xff1a; wx.showModal({ title: 提示, content: 这是一个模态弹窗, success: function (res) { if (res.confirm) {//这里是点击了确定以后 console.log(用户点击…

微信小程序的弹窗提示

第一种&#xff1a;弹出提示框&#xff0c;用户可以选择确定或者取消&#xff0c;且都带有回调。 wx.showModal({title: 提示,content: 这是一个模态弹窗,success: function (res) {if (res.confirm) { //这里是点击了确定以后console.log(用户点击确定)} else { //这里是点击了…

CSS中水平居中、垂直居中和水平同时垂直居中

1.水平居中 2.垂直居中 3.水平并垂直居中 flex布局用到父元素上&#xff0c;绝对定位用到子元素上。

HTML/CSS:图片居中(水平居中和垂直居中)

css图片居中分css图片水平居中和垂直居中两种情况&#xff0c;有时候还需要图片同时水平垂直居中。 css图片水平居中 1.利用margin: 0 auto实现图片水平居中 利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下&#xff1a; <div style"text-…