微信小程序开发之——wx.showToast(OBJECT)的使用
来源:互联网 发布:农资连锁软件 编辑:程序博客网 时间:2024/05/16 15:00
wx.showToast API是显示消息提示框的作用。
先让我们看一下官方的文档说明:
注意:其中的图标,只支持”success”、”loading”
示例代码:
wx.showToast({ title: '成功', icon: 'success', duration: 2000})
接下来演示如何使用,先打开微信web开发者工具,新建快速项目,删除掉首页没用的内容,保留如下部分。
添加两个按钮,同事添加点击事件。再在按钮上添加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;}
最终的页面样式如下:
点击登陆的效果图:
点击查看更多的效果图:
如果我的文章对您有帮助,微信支付宝打赏:
2 0
- 微信小程序开发之——wx.showToast(OBJECT)的使用
- 微信小程序 wx.showToast()
- 微信小程序wx.showToast不显示
- 小程序wx.showToast(OBJECT) image参数值
- 微信小程序编辑器bug:wx.showToast下image无法识别同名图片文件的更改
- 微信小程序开发之数据使用wx:for循环展示
- 【微信小程序常识】wx.showToast消息显示框手机预览失败原因
- 微信小程序 wx.uploadFile(object), wx.downloadFile(object) API
- 微信小程序实例:开发showToast消息提示接口
- 微信小程序的wx:for,wx:for-items,wx:for-item,wx:key等的关系及正确使用
- 【微信小程序】wx:for的使用
- wx网罗系列之翔实:使用C++开发wxWidgets程序
- wx网罗系列之翔实:使用C++开发wxWidgets程序
- wx网罗系列之环境搭建:使用wxWidgets开发跨平台的GUI程序
- 微信小程序开发之扫码 扫一扫 wx.scanCode()
- 微信小程序开发之扫码 扫一扫 wx.scanCode()
- 微信小程序开发之扫码 扫一扫 wx.scanCode()
- 008 - 微信小程序开发之扫码 扫一扫 wx.scanCode()
- Linux字符设备驱动自动创建设备节点
- 用Swift一步步教你封装--AFNetworking
- Visual Studio2010中动态生成注释中的时间__使用宏命令
- android之通过USB插拔流程来了解android UEvent
- sh 软连接的一些操作
- 微信小程序开发之——wx.showToast(OBJECT)的使用
- Android解析XML 格式的数据
- JDK1.5新特性6-互斥锁
- ubuntu16 + jdk8 + hadoop2.7 安装
- Python入门——切片操作
- 队列的模拟实现
- 第一篇博客,简单介绍RecyclerView的应用
- iOS网络请求工具oc版,swift版基于AFNetworking的简单封装
- PyQt4编写界面的两种方式