• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 详解微信小程序开发之——wx.showToast(OBJECT)的使用

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

作者:SundayAaron 字体:[增加 减小] 来源:互联网 时间:2017-05-11

SundayAaron通过本文主要向大家介绍了wx.showtoast,showtoast,android showtoast,java object类详解,object标签详解等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

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

这里写图片描述

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

示例代码:

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

接下来演示如何使用,先打开微信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>
</div>

index.js代码如下:

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

</div>

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

 <view class="br">

 </view>
</div>

wxss文件代码如下:

.br{
 width: 100%;
 height: 200rpx;
}
</div>

最终的页面样式如下:

这里写图片描述

点击登陆的效果图:

这里写图片描述 

点击查看更多的效果图:

这里写图片描述

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

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

相关文章

  • 2017-05-11HTML5+Canvas调用手机拍照功能实现图片上传(下)
  • 2017-05-11谈谈Vue.js——vue-resource全攻略
  • 2017-05-11Easyui笔记2:实现datagrid多行删除的示例代码
  • 2017-05-11微信小程序 template模板详解及实例代码
  • 2017-05-11Vue 2.x教程之基础API
  • 2017-05-11AngularJS中run方法的巧妙运用
  • 2017-05-11angular 基于ng-messages的表单验证实例
  • 2017-05-11原生js实现旋转木马轮播图效果
  • 2017-05-11canvas实现粒子时钟效果
  • 2017-05-11完美实现js焦点轮播效果(二)(图片可滚动)

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • EsLint入门学习教程
    • 100行代码理解和分析vue2.0响应式架构
    • jQuery.cookie.js实现记录最近浏览过的商品功能示例
    • canvas 弹幕效果(实例分享)
    • d3.js实现立体柱图的方法详解
    • ES6--字符串、正则、数值、数组的扩展
    • JS中的作用域链
    • js toString()和valueOf()
    • 详解webpack 配合babel 将es6转成es5 超简单实例
    • JavaScript原生数组Array常用方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有