详解微信小程序开发之——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 AutoScroller 函数类
May 29 Javascript
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 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
PHP面向对象精要总结
2014/11/07 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
Maps Javascript
2007/01/22 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
Python返回数组/List长度的实例
2018/06/23 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
应届生求职信写作技巧
2013/10/24 职场文书
总裁助理岗位职责
2014/02/17 职场文书
超市中秋节促销方案
2014/03/21 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
英语读书笔记
2015/07/02 职场文书
公司管理制度范本
2015/08/03 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python
Python Pandas解析读写 CSV 文件
2022/04/11 Python