微信小程序4种弹框

小程序的三种弹框showToast、showModal、showLoading 阅读详情

1、wx.showModal 确认弹框

 delete(){
    wx.showModal({
      title: '',
      content: '是否确认删除',
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }

 2、wx.showToast 提示弹框

success显示成功图标
error显示失败图标
loading显示加载图标
none不显示图标
wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

3、wx.showLoading loading弹框

wx.showLoading({
  title: '加载中',
})

setTimeout(function () {
  wx.hideLoading()
}, 2000)

4、wx.showActionSheet  操作弹框

wx.showActionSheet({
  itemList: ['A', 'B', 'C'],
  success (res) {
    console.log(res.tapIndex)
  },
  fail (res) {
    console.log(res.errMsg)
  }
})

 customer.wxml

<button class="fixed-service"  bindtap="getPhone">

  <text class="iconfont icon-kefu"></text>

  <view>客服</view>

</button>

customer.css

/* 联系客服 */

.fixed-service {
  display: inline-block;
  bottom: 13%;
  right: 30rpx;
  width: 80rpx;
  height: 80rpx;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  font-size: 20rpx;
  padding: 10rpx;
  line-height: 1.2;
  z-index: 100;
}
.fixed-share .iconfont {
  font-size: 30rpx;
}

customer.js

  getPhone:function (params) {
    var that=this;
    let arr=[];
		wx.request({
			url: newurl.getKfPhone,
			method: 'post',
			success (res) {
				if (res.data.status == 200) {
					console.log(res.data.data);
					that.setData({
							kfphone: res.data.data,
          });
          wx.showActionSheet({
            itemList:['拨打客服电话1','拨打客服电话2'], //文字数组
            success: (ress) => {
              switch(ress.tapIndex) {
                case 0:
                  console.log(res.data.data.kfphone1)
                  wx.makePhoneCall({
                    phoneNumber: res.data.data.kfphone1
                  });
                  break;
                case 1:
                  wx.makePhoneCall({
                    phoneNumber: res.data.data.kfphone2
                  });
                  console.log(res.data.data.kfphone2)
                  break;	
              };
            
            },
            fail (ress) {
              console.log('取消选项')
            }
          })
			} 
			}
		});
  },

【小程序】如何实现从底部弹出对话框 手动实现一个从底部弹出对话框的小程序组件(带动画) 阅读详情

相关推荐

微信小程序弹框之获取输入内容(2)

ex:在我的例子中就是实现获取最终内容跳转到打卡页面(在确认函数实现)点击会实现弹框的消失(想实现更多的内容可在取消确认自己写函数)bindinput='input’绑定的是获取输入内容的函数。model放在需要触发按钮同样的文件wxxml即可。默认消失也就是关闭的,所以在js文件data设置。toClock4函数触发弹框,输入自己想输入内容。关于微信弹框更多知识微信搜索公众号:小白XBIT。1:通过其它打卡绑定函数toClock4。input函数即获取输入文本的内容。3:toClock4函数。

v1029179954 1813

微信小程序的四种弹框

wx.showLoading 和 wx.showToast 同时只能显示一个wx.showLoading 应与 wx.hideLoading 配对使用。

m0_65465945的博客 5305

微信小程序开发之授权弹框

授权弹框 之前在开发小程序的时候遇到的问题,微信已经取消了自动弹框,所以需要开发者自己模拟弹框在用户点开小程序的时候提示授权,之前在网上搜了好多篇,有的能实现获取用户信息却不能让弹框及时弹出,因此学习总结了前人的经验,自己弄出了自己想要的效果。仅供同行们学习参考,若有不足,还望路过的高手不吝赐教。 本文仅获取的是用户昵称、头像、openid等信息,不包括微信号、手机号。 index.wxml &l...

JY185445的博客 7038

微信小程序的四种弹窗使用

总而言之,这四个能处理很少一部分弹窗效果 个人感觉,因为支持的方法太少了,前几天想找个支持照片跟文字的,尝试好久都不行,

欢迎来到skw的博客 1万+

Flutter实现自定义底部弹框分享

如图,主要是为了实现图中的效果,第一次录制视频,还请海涵 flutter的这种弹框,我们用到了showModalBottomSheet这个类,有一篇比较详细的文章Flutter 19: 图解【分享页面】底部对话框,使用的是这个类,说得挺详细的 另外把从发布按钮的代码给全部放上来。 void showPub() { showModalBottomSheet( conte...

徐代龙的技术专栏 7807

微信小程序弹框全攻略:showToast、showModal、showLoading的实战技巧与隐藏功能

本文深入解析微信小程序中showToast、showModal和showLoading三大弹框API的实战技巧与隐藏功能。通过高级配置、生命周期管理、异步控制及健壮的错误处理方案,帮助开发者解决弹框异常消失、输入交互、加载状态冲突等常见痛点,并提供了弹框队列管理和场景化封装等高级实践,以构建更流畅、可靠的小程序交互体验。

weixin_29001423的博客 461

微信小程序实战(1)

在wxml中显示的变量最好都在data中定义一下,即使可以直接通过setData函数来定义,但为了更好的管理对象,最好展示在wxml的变量都在data定义。1,在wxml中引入样式,不需要像html那样通过style标签来引入css,而只需要保证wxml文件与wxss在同一层级且文件名相同(后缀不同)即可。在app.wxss中定义了全局样式,如果需要在某个页面定义特殊的样式,则可以在该页面单独定义xxx.wxss,则会展示xxx.wxss样式。attr可以是当前页全局变量的值,也可以是该方法的参数。

thinkers 523

小程序之修改名字弹框

弹窗 修改昵称 取消 确定 css代码 .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: hi...

qq_43213631的博客 1468

微信小程序-底部弹框组件带动画

效果图 组件 bottomFrame.wxml <view wx:if='{{flag}}'> <view class='wrap {{wrapAnimate}}' style='background:rgba(0,0,0,{{bgOpacity}});'></view> <view catchtap='hideFrame' class='fra...

sunzhibin的博客 5371

微信小程序实现各类弹框、自定义弹框

微信小程序实现各类弹框、自定义弹框

tl437002770的博客 2119

微信小程序实战七:输入弹框的实现

文章目录1.界面效果2.界面布局3.页面逻辑4.源码修改 1.界面效果 2.界面布局 <view> <uni-popup ref="popup" type="dialog"> <uni-popup-dialog mode="input" type="info" title="PIN码" placeholder="请输入PIN码" :before-close="true" @confirm="dialogInputConfirm" @close="closeDia

博主逸尘 1756

微信小程序,实现首页弹框活动引导功能

目录 1.需求 2.数据库设计 3.Java后台配置实现 4.微信小程序前端实现 1.需求 后台可以配置活动时间,在活动期间,自动在小程序首页,以弹框形式显示活动图片。用户可以关闭活动图片的显示。 1.管理后台可以新增活动时间段,是否弹框显示,弹框图片和活动是否开启配置 2.进入小程序时,请求一下后台是否有弹框活动,如果有,就弹框显示活动图片 2.数据库设计 由于小程序弹框活动是系统配置中的一项,直接使用公共的系统配置来存储弹框活动配置。 公共系统配置表结构如下: CREATE

一火的专栏 2512

微信小程序实战九:优惠券底部弹框领取界面的实现

文章目录说明:此文章属于博主逸尘原创,博客地址:https://blog.youkuaiyun.com/qq_16497617,如果转载必须标明原创博客地址路径1.效果预览2.首页顶部优惠券领取布局3.顶部样式4.首页领取点击事件5.底部弹框列表布局6.项目效果所用数据 说明:此文章属于博主逸尘原创,博客地址:https://blog.youkuaiyun.com/qq_16497617,如果转载必须标明原创博客地址路径 1.效果预览 2.首页顶部优惠券领取布局 <view class="couponall"&gt

博主逸尘 1872

微信小程序弹框实现

小程序弹框实现 1、页面结构 <!-- 遮罩层 --> <view> <view class="mask" bindtap="close" wx:if="{{ showModal }}"></view> <view class="modal" wx:if="{{ showModal }}"> &l...

weixin_39277183的博客 2032

警惕!数字签名伪造的攻防演练:用SigThief克隆证书的真实测试(Windows环境)

本文深入探讨了Windows环境下数字签名伪造的攻防技术,详细介绍了使用SigThief工具进行签名提取与克隆的实战步骤。通过真实测试案例,揭示了数字签名安全机制的潜在漏洞,并提供了有效的防御策略和检测技术,帮助安全人员提升系统防护能力。

weixin_42530732的博客 408

别再盲调PID了!手把手教你用VOFA+实时可视化电机速度曲线(附STM32F4源码)

本文详细介绍了如何使用VOFA+工具实现PID参数的可视化调试,帮助开发者从盲调转向精准调优。通过实时可视化电机速度曲线,结合STM32F4源码示例,展示了如何高效调试Kp、Ki、Kd参数,解决响应慢、超调等常见问题,大幅提升电机控制系统的性能。

weixin_28366475的博客 126

微信小程序组件 - 中间底部弹出输入弹框

GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类 一、 jh-input-alert 中间输入弹框,可设置最大输入长度,单行多行显示 单行 <jh-input-alert title='输入框标题' placeholder='请输入' maxlength='10' bind:cancel='cancel' bind:confirm='confirm' wx:if='{{ showDialog2 }}' /> 多行 <jh-i.

iotjin的专栏 5151

大麦网抢票软件工具开发系列(一)

前言《大麦网》都知道吧,就是那个被网友声称“大麦网你卖啥了?”票务平台。近期有听到朋友说《大麦网》的票很难抢,基本上都是说:“哎哟喂,被挤爆啦,请稍后重试!”,也不知道《大麦网》...

架构文摘 1万+

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

要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮) 柚子写项目遇到了一个问题,就是微信小程序官方文档上面的弹框组件picker,它的样式不可操控,当picker的选择项的内容过长时,会显示省略号,但是我的需求是换行展示全部的,但是查了很多博客资料发现,不管怎么操作都是不能更改picker组件的样式,最后没办...

@Grapefruit的博客 8902

保姆级教程:用SOEM主站搞定汇川SV660N伺服驱动器的EtherCAT通讯(附完整C代码)

本文提供了一份详细的SOEM主站与汇川SV660N伺服驱动器EtherCAT通讯的实战教程,涵盖环境搭建、状态机理解、PDO映射配置、CiA402状态机实战、实时性能优化及诊断调试等关键步骤,并附完整C代码示例,帮助开发者快速实现工业级EtherCAT控制。

weixin_28292761的博客 300

CTK Plugin Framework插件框架学习1--Qt编译CTK

【代码】Qt编译CTK。

贝勒里恩的博客 7430

微信小程序弹框显示自定义内容(1)

点击会实现弹框的消失(想实现更多的内容可在取消确认自己写函数)model放在需要触发按钮同样的文件wxxml即可。hiddenmodalput这个控制弹框显示或消失。默认消失也就是关闭的,所以在js文件data设置。关于微信弹框更多知识微信搜索公众号:小白XBIT。1:通过查看详情绑定函数toClock。toClock 触发弹框。input即显示文件内容。2:准备model模块。3:toClock函数。将num显示在弹框里。

v1029179954 1984

Ubuntu零基础入门到精通【4.4讲】:网络、蓝牙、显示器、声音与输入法设置!

🏆 本文收录于 《滚雪球学 Ubuntu》 专栏。 本专栏面向有一定计算机基础,但尚未系统学习 Linux / Ubuntu 的读者,采用“滚雪球式学习法”:先装好、再会用、再理解、再优化、再实战,带你从第一次进入 Ubuntu 桌面 / 终端开始,逐步掌握 Ubuntu 的日常使用、命令操作、软件安装、系统配置、开发环境搭建与服务器部署能力。

**My Coding Family** 1485

html的弹窗可以设置样式吗,css3 弹框提示样式

.common-dialog-box{opacity: 0;filter: alpha(opacity=0);position: fixed;top: 0%;left: 50%;z-index: 1000;width: 500px;height: 50px;line-height: 50px;margin-left: -250px;border-radius: 3px;background-col...

weixin_39658474的博客 533

RTA_OS基础功能讲解 2.6-资源锁和自旋锁

访问需要在任务和 ISR 之间共享的硬件或数据可能不可靠、不安全。这是因为当优先级较低的任务或 ISR 正在更新共享数据时,可能会发生任务或 ISR 抢占。这种情况被称为竞争条件,极难测试。访问共享数据的语句序列称为关键部分。要安全访问关键部分中引用的代码和数据,就需要执行互斥。换句话说,必须确保系统中没有其他任务或第 2 类 ISR 能够在关键部分期间抢占正在执行的任务。你可以将任务声明为非抢占式任务,这样就可以避免互斥问题。

本博客专注于嵌入式软件领域技术分享。 290

孔雀优化算法(POA)详解:从孔雀智能到优化引擎

孔雀优化算法(POA)是一种新型元启发式优化算法,灵感来源于孔雀的社会行为和智能狩猎策略。该算法将孔雀群体分为雄孔雀、雌孔雀和幼孔雀三个阶层,分别对应全局探索、平衡搜索和局部开发三种搜索策略。通过模拟孔雀的求偶展示、自适应接近和Levy飞行等行为,POA实现了探索与开发的动态平衡。算法采用角色分配机制和位置更新方程,结合参数自适应调整,展现出优于传统算法的全局搜索能力和收敛性能。POA已成功应用于多个优化问题,其生物启发机制为解决复杂优化问题提供了新思路。

qq_42212808的博客 135
上一篇: 优化Mysql数据库
下一篇: 多域名微信公众号获取授权(前后端分离,后端获取微信用户openid)
梦夏夜
博客等级 码龄10年 532粉丝 56原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梦夏夜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值