ionic纯html，js实现toast提示框

最新推荐文章于 2025-06-22 21:58:11 发布

huzhenv5

最新推荐文章于 2025-06-22 21:58:11 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： ionic 文章标签： ionic toast 信息框

本文链接：https://blog.youkuaiyun.com/huzhenv5/article/details/77407724

ionic 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍如何在Ionic项目中集成ionic-toast库，实现自定义提示消息功能。包括安装库文件、引入依赖、配置注入等步骤，并提供了示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这种实现方法不会调用系统源生的控件，在开发时方便调试，性能上也没太大差别，以下直接上不集成步骤：
1，进入ionic工程根目录，安装ionic-toast库文件：

bower install ionic-toast --save

安装完后，会在ionic工程目录的lib文件夹下出现ionic-toast库文件：
这里写图片描述
2，在ionic工程的index.html页面中引入库文件：

<link href="lib/ionic-toast/dist/style.css" rel="stylesheet"> 
<!-- path to ionic/angularjs js -->
<script src="lib/ionic-toast/dist/ionic-toast.js"></script>

3，在工程的app.js文件中，添加注入module，注意是ionic-toast，别拼错：

angular.module('rc', 
 ['ionic', 
  'ionic-toast'
  ])

4，在需要用页面对应的controller文件中，添加注入，注意是ionicToast：

.controller('HomeCtrl', ['$scope', 'ionicToast', function($scope, ionicToast) {
  //code here
}])

5，准备工作都已经完成，现在可以开始使用啦，html页面绑定触发方法：

<button class="button button-block" ng-click="showToast()">Show Toast at top with close</button>

6，controller中实现，注意写法：

$scope.showToast = function(){
<!-- ionicToast.show(message, position, stick, time); -->
  ionicToast.show('This is a toast at the top.', 'top', true, 2500);
};

一共有四个参数，分别解释下：
message：要提示的信息
position：toast弹出框的位置，有三种选择（top、middle、bottom），看单词意思，大家应该能理解了
stick：布尔值，true表示toast弹出框带有关闭按钮，需要手动关闭toast弹出框；false表示弹出框不带有关闭按钮，会手动自动toast弹出框，toast信息框持续的时间就是第四个参数
time：toast信息框自动关闭时，持续的时间；单位是毫秒，最大可以设置为5000，如果超过5000，会自动设置为5000
7，在你注入ionicToast的controller中，实现以下方法：

$scope.hideToast = function(){
  ionicToast.hide();
};

这个在自动关闭toast信息框时，不加上也能自动关闭，不知道设置为手动关闭信息框时，不设置的话会不会有影响。
以上就是集成的所有步骤，欢迎大家参考指教。
参考资料：https://market.ionic.io/plugins/ionictoast