详解微信小程序开发之——wx.showToast(OBJECT)的使用


Posted in Javascript onJanuary 18, 2017

wx.showToast API是显示消息提示框的作用。

先让我们看一下官方的文档说明:

详解微信小程序开发之——wx.showToast(OBJECT)的使用

注意:其中的图标,只支持”success”、”loading”

示例代码:

wx.showToast({
 title: '成功',
 icon: 'success',
 duration: 2000
})

接下来演示如何使用,先打开微信web开发者工具,新建快速项目,删除掉首页没用的内容,保留如下部分。

详解微信小程序开发之——wx.showToast(OBJECT)的使用 

添加两个按钮,同事添加点击事件。再在按钮上添加navigator导航,链接到默认的日志页面。代码如下:

<navigator url="../logs/logs">
 <button type="primary" bindtap="logbtn"> 登陆 </button>
 </navigator>
 <view class="br">

 </view>
 <navigator url="../logs/logs">
 <button type="primary" bindtap="morebtn"> 查看更多 </button>
 </navigator>

index.js代码如下:

logbtn: function () {
 wx.showToast({
 title: '登陆成功',
 icon: 'success',
 duration: 1200
 })
 },
 morebtn: function () {
 wx.showToast({
 title: '加载中',
 icon: 'loading',
 duration: 1200
 })
 },

为了测试效果直观一些,我们在两个按钮中插入一块view标签,让两个按钮上下之间有间距。wxml代码如下:

<view class="br">

 </view>

wxss文件代码如下:

.br{
 width: 100%;
 height: 200rpx;
}

最终的页面样式如下:

详解微信小程序开发之——wx.showToast(OBJECT)的使用

点击登陆的效果图:

详解微信小程序开发之——wx.showToast(OBJECT)的使用 

点击查看更多的效果图:

详解微信小程序开发之——wx.showToast(OBJECT)的使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
js实现选项卡效果
Mar 07 Javascript
原生JS实现天气预报
Jun 16 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 #Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 #Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 #Javascript
vue.js+Element实现表格里的增删改查
Jan 18 #Javascript
JS中Array数组学习总结
Jan 18 #Javascript
原生javascript实现图片放大镜效果
Jan 18 #Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 #Javascript
You might like
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
详解python的几种标准输出重定向方式
2016/08/15 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
python简单验证码识别的实现方法
2019/05/10 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
护理职业生涯规划书
2014/01/24 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
保健品市场营销方案
2014/03/31 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
平面设计专业求职信
2014/08/09 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
外国人来华邀请函
2015/01/31 职场文书
留学推荐信怎么写
2015/03/26 职场文书
超市员工管理制度
2015/08/06 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书