小程序弹窗的几种形式

以下是小程序中常用的集中弹窗形式:
1.类似layer.confirm(‘111‘,function(){})效果
wx.showModal({
      title: ‘‘,
      content: ‘暂无分析数据‘,
      showCancel: false
    });
}

2.类似layer.msg效果
wx.showToast({
     title: ‘登录成功‘,
     icon: ‘success‘,
     duration: 1000
})

3.loading显示框:showLoading与hideLoading配对使用
wx.showLoading({
  title: ‘加载中。。。‘,
})
4.隐藏显示的loading
setTimeout(function () {
  wx.hideLoading()
}, 2000)

更多用法与属性参考微信小程序API

原文地址:https://www.cnblogs.com/lvxisha/p/11438089.html

时间: 2024-08-28 21:12:39

小程序弹窗的几种形式的相关文章

微信小程序弹窗的几种形式

小程序弹窗的几种形式 一.wx.showToast(Object object)微信小程序显示消息提示框 1.不带图标的信息提示 wx.showToast({ title: '服务暂未开通', icon: 'none', duration: 2000 }) 2.带图标得提示:加载中.提示成功 加载中提示: (1)显示 loading 提示框.需主动调用 wx.hideLoading 才能关闭提示框 wx.showLoading({ title: '加载中', }) setTimeout(func

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

1. 表示操作成功,文字上方会显示一个表示操作成功的图标. wx.showToast({ title: '操作成功!', // 标题 icon: 'success', // 图标类型,默认success duration: 1500 // 提示窗停留时间,默认1500ms }) 2.表示加载中,显示为加载中图标. wx.showToast({ title: '加载中...', icon: 'loading', duration: 1500 }) 3.不显示图标,一般用作提示. wx.showTo

小程序弹窗阻止滑动的两种方法

弹出 fixed 弹窗后,在弹窗上滑动会导致下层的页面一起跟着滚动. 场景1:弹窗内无滚动内容 可以在弹窗最外层元素绑定touchmove事件,触发事件返回false即(在vue类框架中也可以加.stop阻止冒泡). 简单写法:catchtouchmove='true' 此种方式会阻止弹窗内内容的滚动. 场景二:弹窗内有滚动内容 在弹窗外层根元素动态添加一个no-scroll样式,定义no-scroll为{height: 100%; overflow: hidden;} 当需要阻止滑动的弹窗显示

小程序弹窗分类

第一种:无按钮 提示类型 wx.showToast({ title: '去结算', icon: 'success', duration: 2000, success: function () { setTimeout(function () { wx.navigateTo({ url: '../order-detail/order-detail', }) }, 1000) } }); 第二种:有按钮 wx.showModal({ title: '提示', content: '确定要删除吗?',

小程序-引用的两种方式:import和include

import import可以在该文件中使用目标文件定义的template,如: 在mine.wxml中定义了一个叫item的template: <template name="item"> <text>{{text}}</text> </template> 在detail.wxml中引用了mine.wxml,就可以使用item模板: <import src="../mine/mine.wxml"/> &l

微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的是自定义组件化开发,就是把弹出框封装成一个组件,然后多处调用. 解决了小程序开发自定义弹窗出现后,遮罩层下的页面仍可以滚动的方法: 给遮罩层的最外层view中加入catchtouchmove="preventTouchMove" 即可解决该遮罩层点透问题. 根据需要还可以自定义多个按钮及事

{{view 视图层}}微信小程序

微信小程序 view 视图层//自学 1.数据绑定 数据绑定 WXML中的动态数据均来自对应Page的data. 简单绑定 数据绑定使用"Mustache"语法(双大括号)将变量包起来,可以作用于: 内容 <view> {{ message }} </view> Page({ data: { message: 'Hello MINA!' } }) 组件属性(需要在双引号之内) <view id="item-{{id}}"> <

“匿名聊聊”作者谈如何打造现象级爆款小程序

前段时间小程序“匿名聊聊”刷爆了朋友圈,可惜后面被屏蔽了.作为第一款现象级呈现爆炸级传播的小程序它是如何做到的呢?我们就跟随“匿名聊聊”作者来聊聊如何打造现象级爆款小程序. 作为第一款现象级呈现爆炸级传播的小程序,“匿名聊聊”背后的公司:朋友印象是一家深耕社交产品的公司,创始人栗浩洋和魏志成两人都公开表示,这次的“匿名聊聊”是扔出的一个问路的石子,真正的生化武器和核弹还在后面. 被寄予厚望的小程序自今年1月上线以来,一直表现的冷冷清清.流量入口没有优先级的倾斜,用户获取提供的也是模糊搜索,即便微

wx小程序初体验

小程序最近太火,不过相比较刚发布时,已经有点热度散去的感觉,不过这不影响我们对小程序的热情,开发之前建议通读下官网文档,附链接:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=201716 接下来,我们要实现的小程序效果如下,源码地址:https://github.com/caiya/weapp-ywgo: 1.注册 打开微信公众平台,单击"小程序",按步骤开始注册即可,附地址:https://mp.weixin.qq.com/cgi-bin/