微信小程序开发之toast等弹框提示使用教程

前端之家收集整理的这篇文章主要介绍了微信小程序开发之toast等弹框提示使用教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

介绍

微信小程序中toast消息提示框只有两种显示效果,就是成功和加载,使用wx.showToast(OBJECT)

看下有关参数说明:

代码很简单:

mask属性好像并没有起作用。有一点值得注意的是提示的延迟时间是有限制的,最大10000毫秒。

还有一个函数wx.hideToast() ,这个是隐藏toast,主要用于显示加载提示的时候用到,如:

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

本来加载时间是10000毫秒的,然后2000毫秒的时候就隐藏了,这个具体情况而定了哈。

第二个弹窗是模态弹窗:wx.showModal(OBJECT)

参数如下:

这个跟我们Android里面的Dialog相似,效果如下:

代码如下:

提示',content: '模态弹窗',success: function (res) { if (res.confirm) { console.log('用户点击确定') }else{ console.log('用户点击取消') }

}
})

最后一个是操作菜单wx.showActionSheet(OBJECT)

这个函数我们在上一篇文章用过,这里说一下也无妨。

先看一下参数介绍:

success有一个返回参数:

这里直接贴官方实例了:

效果图:

这里有个小问题,弹出showActionSheet之后,点击取消或者阴影处,会执行完fail之后,继续执行success函数,当然了,这里肯定有办法解决的,success其实有两个返回参数,除了tapIndex之外,还有一个就是cancle,cancle就是是否取消,返回一个boolean,在弹出这个框之后在success里面做个判断,if (!res.cancel) {做不取消的操作就行了}。当然了,你也可以自己来定义。

下面看个自定义弹窗的:

wxml:

Box" wx:if="{{showModalStatus}}" bindtap="navigate">

css:

.commodityattrBox {
width: 100%;
overflow: hidden;
position: fixed;
bottom: 0;
left: 0;
z-index: 2000;
height: 60px;
background: #fff;

}

.title {
height: 100%;
width: 100%;
position: fixed;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;

}

js:

显示遮罩层 var animation = wx.createAnimation({ duration: 200,timingFunction: "linear",delay: 0 }) this.animation = animation animation.translateY(300).step() this.setData({ animationData: animation.export(),showModalStatus: true }) setTimeout(function () { animation.translateY(0).step() this.setData({ animationData: animation.export() }) }.bind(this),200) },hideModal: function () { this.hideView(); },hideView() { // 隐藏遮罩层 var animation = wx.createAnimation({ duration: 200,}) setTimeout(function () { animation.translateY(0).step() this.setData({ animationData: animation.export(),showModalStatus: false }) }.bind(this),200) }

启用动画来做,效果杠杠的,自己动手来试试。

也可以使用action-sheet来布局,如下:

就是这么简单,赶紧动起来试试吧。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持

原文链接:https://www.f2er.com/weapp/38760.html

猜你在找的微信小程序相关文章