详解微信小程序开发之——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 相关文章推荐
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
javascript定义类和类的实现实例详解
Dec 01 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
jQuery之动画效果大全
Nov 09 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
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
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
WebPack基础知识详解
2017/01/16 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
python实现的一个p2p文件传输实例
2014/06/04 Python
python 读入多行数据的实例
2018/04/19 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
借款协议书范本
2014/04/22 职场文书
诉前财产保全担保书
2014/05/20 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
同学联谊会邀请函
2019/06/24 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS