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

2021-06-29 13:50:01 字數 1914 閱讀 6869

一,側滑效果

主要涉及到三個地方

1,選單頁面

主要分為主頁面和側滑頁面兩部分,又分別都包含頂部bar和主要內容部分

} 0">}

在配置頁面記得,通過選單內容頁面的name,把選單和選單內容頁關聯起來

對於選單頁,設定的abstract: true,暫時作用是不可以跳轉到此頁面(即不可以跳轉到menu.html)

angular.module('todo.io', ['ionic', 'todo.io.directives', 'todo.io.filters', 'todo.io.services', 'todo.io.controllers', 'nspopover','localstoragemodule','ngcordova'])

.run(function($ionicplatform)

if(window.statusbar)

});}).config(function($stateprovider, $urlrouterprovider) )

.state('sign', )

abstract: true,

templateurl: "templates/menu.html",

})//通過選單內容頁面的name,把選單和選單內容頁關聯起來

url: "/todolist/:groupid",

views: }})

url: "/todolist/edit/:groupid",

views: }})

url: "/todo/:todoid",

views: }})

url: "/group",

views: }})

url: "/group/:groupid",

views: }})

url: "/search",

views: }})

url: "/settings",

views:

}});

$urlrouterprovider.otherwise('/');

});

3,選單內容頁面主要就是關聯選單的button,設定此屬性就行menu-toggle

效果圖(電腦瀏覽器的,手機也一樣)

二,下拉重新整理

主要兩部分控制部分和頁面部分

1,頁面部分

ion-refresher重新整理控制項,on-refresh設定重新整理方法,還有下拉文字,重新整理文字,下拉效果圖

}2,控制部分

主要就是控制完成重新整理後,通知關閉重新整理效果

.controller('myctrl', function($scope, $timeout) , 1000);

};});

另外找到ionic的svg動畫效果圖,可是不知道怎麼加入

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

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

ionic 下拉重新整理時觸發上拉載入事件的解決辦法

不知為何我的專案使用 ion refresher 和 ion infinite scroll的時候,出現了每次下拉重新整理的時候,都會多次觸發上拉載入控制項的事件 研究小半天最後終於找到了解決辦法 如果ion infinite scroll 的 immediate check 屬性沒有設定 那麼改為...

vant實現上拉載入下拉重新整理的效果

onload 下拉重新整理,上拉載入更多 v model searchval show action placeholder search onsearch onsearch 搜尋 div template van search primary 搜尋 van button refreshing re...