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

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

介绍

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

看下有关参数说明：

代码很简单：

wx.showToast({

title: '成功',

icon: 'succes',

duration: 1000,

mask:true

})

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

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

wx.showToast({

title: '加载中',

icon: 'loading',

duration: 10000

})

setTimeout(function(){

wx.hideToast()

},2000)

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

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

参数如下：

这个跟我们android里面的Dialog相似，效果如下：

代码如下：

wx.showModal({

title: '提示',

content: '模态弹窗',

success: function (res) {

if (res.confirm) {

console.log('用户点击确定')

}else{

console.log('用户点击取消')

}

}

})

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

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

先看一下参数介绍：

success有一个返回参数：

这里直接贴官方实例了：

wx.showActionSheet({

itemList: ['A', 'B', 'C'],

success: function(res) {

console.log(res.tapIndex)

},

fail: function(res) {

console.log(res.errMsg)

}

})

效果图：

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

下面看个自定义弹窗的：

wxml:

{{title}}

css:

.commodity_screen {

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

background: #000;

opacity: 0.2;

overflow: hidden;

z-index: 1000;

color: #fff;

}

.commodity_attr_box {

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:

showView() {

// 显示遮罩层

var animation = wx.createAnimation({

duration: 200,

timingFunction: "linear",

delay: 0

})

this.animation = animation

animation.translateY(300).step()

this.setData({

animhttp://ationData: animation.export(),

showModalStatus: true

})

setTimeout(function () {

animation.translateY(0).step()

this.setData({

animationData: animation.export()

})

}.bind(this), 200)

},

hideModal: function () {

thishttp://.hideView();

},

hideView() {

// 隐藏遮罩层

var animation = wx.createAnimation({

duration: 200,

timingFunction: "linear",

delay: 0

})

this.animation = animation

animation.translateY(300).step()

this.setData({

animationData: animation.export(),

})

setTimeout(function () {

animation.translateY(0).step()

this.setData({

animationData: animation.export(),

showModalStatus: false

})

}.bind(this), 200)

}

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

也可以使用action-sheet来布局，如下：

{{item}}

取消

Page({

data: {

actionSheetHidden: true,

actionSheetItems: items

},

actionSheetTap: function(e) {

this.setData({

actionSheetHidden: !this.data.actionSheetHidden

})

},

actionSheetChange: function(e) {

this.setData({

actionSheetHidden: !this.data.actionSheetHidden

})

}

}

})

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

总结

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。