ionic实现Android下拉更新时的Toast功能

引言:
主要使用Toast-PhoneGap-Plugin来实现Toast功能,但使用这个插件前,我们需要安装ngCordova
这里写图片描述

1. Ref_1:建立ngCordova:

http://ngcordova.com/docs/install/

$ bower install ngCordova

2. Ref_2:添加插件

插件的用法:https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin#2-screenshots

$ cordova plugin add cordova-plugin-x-toast 或者(cordova plugin add https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git)
$ cordova prepare

3.引入脚本文件

在index.html 中的<script src="cordova.js"></script>之前引入

<script src="lib/ngCordova/dist/ng-cordova.js"></script>

4.在module中引入依赖


angular.module('starter', ['ionic', 'ngCordova'])
<body ng-app="starter">
   <ion-pane>
     <ion-header-bar class="bar-positive">
       <h1 class="title">Devdactic Simple List</h1>
     </ion-header-bar>

     <ion-content ng-controller="AppCtrl">
         <ion-list>
         <ion-refresher pulling-text="Pull to refresh"
         refreshing-text="Loading..."
         refreshing-icon="ion-loading-c"
         pulling-icon="ion-ios7-arrow-thin-down"
         on-refresh="doRefresh()">
         </ion-refresher>

         <ion-item ng-repeat="item in items">
            {{item}}
         </ion-item>
     </ion-list>

     </ion-content>
   </ion-pane>
 </body>
.controller('AppCtrl', function($scope, $cordovaToast) {
    $scope.items = ['First item', 'Second item', 'Third item'];

    $scope.doRefresh = function() {
        $scope.items.push('More items ' + Math.random());
        $scope.$broadcast('scroll.refreshComplete');

        $cordovaToast.showLongBottom('This could be your text!')
        .then(function(success) {
            // Do something on success
        }, function(error) {
            // Handle error
        });
    }
});

建立android

You need the Android SDK installed on your computer to build an Android version of your application using the steps below.
Make sure the Android SDK and the ant build tool are available on your system. The Android SDK is available here. Both the android and ant tools must be available in your path. To test your configuration, you should be able to execute both android and ant from the command line.

On the command line, make sure you are in the ionic-tutorial/conference directory

Add support for the Android platform:

ionic platform add android

Build the project:

ionic build android

The project is built in the conference/platforms/android folder

To build and run the application on an Android device connected to your computer using a USB cable:

ionic run android
致谢:
http://devdactic.com/pull-to-refresh-ionic/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值