微信小程序中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)123456789本来加载时间是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:
viewbindtap="hideModal"wx:if="{{showModalStatus}}"/viewviewanimation="{{animationData}}"wx:if="{{showModalStatus}}"bindtap="navigate"text{{title}}/text/viewcss:
.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(){//显示遮罩层varanimation=wx.createAnimation({duration:200,timingFunction:"linear",delay:0})this.animation=animationanimation.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(){//隐藏遮罩层varanimation=wx.createAnimation({duration:200,timingFunction:"linear",delay:0})this.animation=animationanimation.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来布局,如下:
action-sheethidden="{{actionSheetHidden}}"bindchange="actionSheetChange"blockwx:for-items="{{actionSheetItems}}"action-sheet-itembindtap="bind{{item}}"{{item}}/action-sheet-item/blockaction-sheet-cancel取消/action-sheet-cancel/action-sheetPage({data:{actionSheetHidden:true,actionSheetItems:items},actionSheetTap:function(e){this.setData({actionSheetHidden:!this.data.actionSheetHidden})},actionSheetChange:function(e){this.setData({actionSheetHidden:!this.data.actionSheetHidden})}}})---------------------本文来自何东_hd的CSDN博客,全文地址请点击:https://blog.csdn.net/hedong_77/article/details/54948537?utm_source=copy
最新资讯
-
抖音再现本地生活服务,咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地,每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级,打造了咫尺同城圈:“同城探店营销助手”,不仅完善商家营销技巧,还助力探店网红玩转本地生活服务。 -
抖音再现本地生活服务,咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地,每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级,打造了咫尺同城圈:“同城探店营销助手”,不仅完善商家营销技巧,还助力探店网红玩转本地生活服务。 -
阿坝小程序代理
阿坝藏族羌族小程序代理公司有哪些?阿坝藏族羌族小程序代理平台哪个好?阿坝藏族羌族小程序代理商怎么收费,代理政策如何?下面就让即速应用产品经理jisuapp.cn来告诉你吧!