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


Posted in Javascript onJune 08, 2017

介绍

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

看下有关参数说明:

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

代码很简单:

wx.showToast({
 title: '成功',
 icon: 'succes',
 duration: 1000,
 mask:true
 })

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

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

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

wx.showToast({
 title: '加载中',
 icon: 'loading',
 duration: 10000
})

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

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

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

参数如下:

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

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

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

代码如下:

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

 }
 })

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

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

先看一下参数介绍:

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

success有一个返回参数:

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

这里直接贴官方实例了:

wx.showActionSheet({
 itemList: ['A', 'B', 'C'],
 success: function(res) {
 console.log(res.tapIndex)
 },
 fail: function(res) {
 console.log(res.errMsg)
 }
})

效果图:

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

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

下面看个自定义弹窗的:

wxml:

<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
 <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}" bindtap="navigate">
 <text class="title">{{title}}</text>
 </view>

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({
 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,
 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来布局,如下:

<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
 <block wx:for-items="{{actionSheetItems}}">
 <action-sheet-item class="item" bindtap="bind{{item}}">{{item}}</action-sheet-item>
 </block>
 <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>
Page({
data: {
 actionSheetHidden: true,
 actionSheetItems: items
 },
 actionSheetTap: function(e) {
 this.setData({
 actionSheetHidden: !this.data.actionSheetHidden
 })
 },
 actionSheetChange: function(e) {
 this.setData({
 actionSheetHidden: !this.data.actionSheetHidden
 })
 }
}
})

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

总结

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

Javascript 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
JavaScript 定义function的三种方式小结
Oct 16 Javascript
遍历jquery对象的代码分享
Nov 02 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 Javascript
javascript实现二叉树遍历的代码
Jun 08 #Javascript
微信小程序tabbar不显示解决办法
Jun 08 #Javascript
javascript实现二叉树的代码
Jun 08 #Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 #Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 #Javascript
angular实现图片懒加载实例代码
Jun 08 #Javascript
微信小程序日历组件calendar详解及实例
Jun 08 #Javascript
You might like
php 应用程序安全防范技术研究
2009/09/25 PHP
php header功能的使用
2013/10/28 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
js实现点击烟花特效
2020/10/14 Javascript
跟老齐学Python之再深点,更懂list
2014/09/20 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
Pytorch转tflite方式
2020/05/25 Python
python设置表格边框的具体方法
2020/07/17 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
Python下载的11种姿势(小结)
2020/11/18 Python
python中str内置函数用法总结
2020/12/27 Python
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
物业管理计划书
2014/01/10 职场文书
爱心捐助活动总结
2015/05/09 职场文书