ionic 下拉重新整理的視覺友好互動小tips

2021-07-24 14:30:25 字數 2092 閱讀 5746

乙個多月沒有寫部落格了,實在是太忙了,因為一直在趕專案,做乙個基於swoole的伺服器之間的非同步通訊和檔案傳輸的服務和api,搞得真的辛苦啊,最終搞定了,測試的整個效能還是不錯的,整個過程收穫很大,有時間在整理一下關於swoole這方面的知識

。然而下面說的還是關於ionic的移動混合框架的知識

在原生的ionic方法中實現的下拉重新整理功能中,基本功能都已經實現了,但是為了實現更好的使用者體驗,比如在下拉重新整理成功的時候,一般都會顯示乙個綠色圓形打鉤的icon,表示想、重新整理成功,但是在我們的實際上,這個圖示是沒有的顏色的,預設是灰色的,給人的感覺總是覺得不是那麼直接,缺乏一種視覺感,所以下面將簡單地修改一下ionic.bundle.js的原生**,實現乙個友好體驗視覺感的下拉重新整理功能。

預設的下拉:

可以看到顯示的圖示時淺灰色的。

修改之後:

那麼我們該如何修改呢?

(1)首先在ionic.bundle.js中,找到ionicrefresher這個指令所在地方,這個指令**如下:

ionicmodule

.directive('ionrefresher', [function() }">' +

'' + '

' + '' +

'' +

'style="color:}">' +

'' + '

' + '

' + '

', link: function($scope, $element, $attrs, ctrls) else );

});}}};

}]);

紅色是我們新增**

我們在'' 新增style="color:}",變成

在中新增style="color:}",最終變成

(2)再找到$ionicrefresher這個控制器,**如下:

ionicmodule

.controller('$ionicrefresher', [

'$scope',

'$attrs',

'$element',

'$ionicbind',

'$timeout',

function($scope, $attrs, $element, $ionicbind, $timeout)

if (!isdefined($attrs.refreshingiconcolor))

if (!isdefined($attrs.refreshingiconcolor))

$scope.showspinner = !isdefined($attrs.refreshingicon) && $attrs.spinner != 'none';

$scope.showicon = isdefined($attrs.refreshingicon);

$ionicbind($scope, $attrs, );

........

新增了一下**

if (!isdefined($attrs.refreshingiconcolor))

if (!isdefined($attrs.refreshingiconcolor))

同時還的新增

pullingiconcolor: '@',

disablepullingrotation: '@',

代表獲取指令屬性內的值

那麼在我們的html頁面中可以這樣使用

pulling-icon-color="red" on-refresh="dorefresh()" refreshing-icon="ion-checkmark-circled" refreshing-icon-color="green" refreshing-text="成功更新20資訊">

注意其中紅色部分,即是設定的顏色值

至此整個修改過程就完成了

ionic 下拉重新整理

ionic提供了非常簡單的指令來實現下拉重新整理。首先,我們需要在列表前加乙個標籤 我們可以定義下拉重新整理時顯示的字型,以及對應的操作,這裡是呼叫dorefresh 下面我們看一下js裡面怎麼控制 scope.todos scope.dorefresh function scope.broadca...

ionic 自動下拉重新整理

通過程式的方式,實現 ion refresher 下拉重新整理 在頁面新增 ion refresher 元件 ion refresher content ion refresher ion button click startrefresh 重新整理button ion content 複製 編寫觸...

ionic的側滑和下拉重新整理效果

一,側滑效果 主要涉及到三個地方 1,選單頁面 主要分為主頁面和側滑頁面兩部分,又分別都包含頂部bar和主要內容部分 0 在配置頁面記得,通過選單內容頁面的name,把選單和選單內容頁關聯起來 對於選單頁,設定的abstract true,暫時作用是不可以跳轉到此頁面 即不可以跳轉到menu.htm...