微信小程序弹窗
2024-09-05 00:50:44
wxml
<view class="content">
<button bindtap="popSuccessTest">成功提示弹窗</button>
<button bindtap="popMaskTest">带透明蒙层的弹窗</button>
<button bindtap="popTest">纯文字弹窗</button>
<button bindtap="popCustomIcon">自定义图标</button>
<button bindtap="popConfirm">confirm的弹窗</button>
<button bindtap="popLoading">加载弹窗</button>
<button bindtap="popSelect">选择框弹窗</button>
</view>
js
Page({
popSuccessTest: function () {
wx.showToast({
title: '成功提示弹窗',
icon: '', //默认值是success,就算没有icon这个值，就算有其他值最终也显示success
duration: 2000, //停留时间
})
},
popMaskTest: function () {
wx.showToast({
title: '带蒙层的弹窗',
duration: 2000,
mask:true //是否有透明蒙层，默认为false
//如果有透明蒙层，弹窗的期间不能点击文档内容
})
},
popTest: function(){
wx.showToast({
title: '纯文字弹窗',
icon: 'none', //如果要纯文本，不要icon，将值设为'none'
duration: 2000
})
},
popCustomIcon: function () {
wx.showToast({
title: '自定义图标弹窗',
image: '../image/11.jpg', //image的优先级会高于icon
duration: 2000
})
},
popConfirm: function(){
wx.showModal({
title: 'confirm的弹窗',
content: '确认要删除该项吗？',
success: function (res) {
if (res.confirm) {
console.log('点击确认回调')
} else {
console.log('点击取消回调')
}
}
})
},
popLoading: function(){
wx.showLoading({
title:'加载中...'
});
},
popSelect: function(){
wx.showActionSheet({
itemList: ['1', '2', '3'],
success: function (res) {
console.log(res);
}
})
}
});
注意
wx.showToast中比较重要的属性
title: '弹窗文字内容',
icon: 弹窗图标默认值是success，当没有这个属性时，或者当值为''，或者为其他值时(设置了error,warning都无效)都最终为success。如果要纯文本，不要icon，将值设为'none'
image: 自定义图标,image的优先级会高于icon
duration: 弹窗停留时间,
mask: 是否有透明蒙层，默认为false ，如果有透明蒙层，弹窗的期间不能点击弹窗后面的文档内容
wx.showLoading注意点
使用wx.showLoading触发的弹窗，需要用wx.hideLoading()来关闭.
最新文章
- css的继承性
- CentOS 7虚拟机下模拟实现nginx负载均衡
- loj 1167(二分+最大流）
- 调整linux的时钟
- cocos2dx+lua中cc.EventListenerMouse:create()的bug
- scala: How to write a simple HTTP GET request client in Scala (with a timeout)
- JavaScript 伪造 Referer 来路方法
- [luogu3834]静态区间第k小【主席树】
- ipython+notebook使用教程（转载）
- 一篇文章让你读懂iOS和Android的历史起源
- JS神经网络deeplearn.js:浏览器端机器智能框架
- C# 语法特性 - 泛型（C#2.0）
- SharePoint 2013 地址栏_layouts/15/start.aspx#
- 第二篇博客 wordcount
- fetch上传文件
- 福大软工 · 第七次作业 - 需求分析报告（404 Note Found队）
- jquery中 $ 和 jQuery 及 $() 的区别
- IOS中使用轻量级数据库
- sqlite的事务和锁，很透彻的讲解 【转】
- 20162327WJH四则运算第二周总结