源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

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

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2017-1-18 14:56:49 | 显示全部楼层 |阅读模式
本篇文章主要介绍了微信小程序开发之——wx.showToast(OBJECT)的使用,具有一定的参考价值,有兴趣的可以了解一下。

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;
}

最终的页面样式如下:

这里写图片描述

点击登陆的效果图:

这里写图片描述 

点击查看更多的效果图:

这里写图片描述

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

回复

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-8-8 10:19:50 | 显示全部楼层
灌灌灌灌水
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

50

积分

注册会员

Rank: 2

积分
50
发表于 2022-8-25 13:04:13 | 显示全部楼层
哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

381

积分

中级会员

Rank: 3Rank: 3

积分
381
发表于 2022-9-5 16:42:46 | 显示全部楼层
好东西可以可以可以可以
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-10-16 22:14:11 | 显示全部楼层
儿飞飞微风DVD谁vdsvd
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

61

积分

注册会员

Rank: 2

积分
61
发表于 2022-11-15 22:29:05 | 显示全部楼层
啪啪啪生怕PSP怕
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

301

积分

中级会员

Rank: 3Rank: 3

积分
301
发表于 2022-12-14 11:36:13 | 显示全部楼层
天天源码社区论坛
回复 支持 反对

使用道具 举报

7

主题

2万

回帖

398

积分

中级会员

Rank: 3Rank: 3

积分
398
发表于 2024-6-7 19:03:30 | 显示全部楼层
66666666666666666666
回复 支持 反对

使用道具 举报

11

主题

1万

回帖

103

积分

注册会员

Rank: 2

积分
103
发表于 2024-6-13 01:21:38 | 显示全部楼层
快更新啊,我擦
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2024-6-14 02:59:17 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-24 16:13 , Processed in 0.067215 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表