由於專案中需要帶字的toggle滑動元件,而ionic提供的是這樣的:
實際專案中需要這樣子的:
在網上找了下其他的實現,感覺沒得類似的,也沒發現合適的,於是自己試著定義了乙個湊合著用。先上效果圖
看效果圖邊緣有模糊鋸齒現象,可能是由於畫素的影響,在android和ios手機上表現非常流暢。
#2 實現
其實實現起來也很簡單,主要是算好滑塊的位置,滑動用的是css的transform.
css用到的類如下:
.switch_search
.switch_search_tab
.white_search_tab
.switch_bg
.search_right
.search_left
頁面上html**:
class
="switch_search"
>
class
="switch_search_tab"
on-swipe-right
="activeslidesearch(1)"
ng-click
="activeslidesearch(0)"
ng-class
="(slideindexsearch==0 ||slideindexsearch==-1) ? '
' : 'white_search_tab'
">
月 div
>
class
="switch_search_tab"
on-swipe-left
="activeslidesearch(0)"
ng-click
="activeslidesearch(1)"
ng-class
="(slideindexsearch==1) ? '
' : 'white_search_tab'
">
日 div
>
class
="switch_bg"
ng-class
="(slideindexsearch==0 ||slideindexsearch==-1) ? 'search_left' :'search_right'
">
div>
div>
對應的controller js**如下:
$scope.slideindexsearch=-1
; $scope.
activeslidesearch
=function
(index)
;
帶手勢滑動的日曆Demo
該日曆是用gridview來寫的,其實跟普通的日曆相比就增加了乙個通過手勢來拖動頁面的效果,那這個手勢gesture在android裡是如何實現的呢?接下來我就為大家展示一下改程式的主要核心 以及解析.首先看一下效果圖 首先要建立乙個gesturelistener類來繼承 ongesturelist...
帶手勢滑動的日曆Demo
該日曆是用gridview來寫的,其實跟普通的日曆相比就增加了乙個通過手勢來拖動頁面的效果,那這個手勢gesture在android裡是如何實現的呢?接下來我就為大家展示一下改程式的主要核心 以及解析.首先看一下效果圖 首先要建立乙個gesturelistener類來繼承 ongesturelist...
css 帶陰影的字
html head title new document title meta name generator content editplus meta name author content meta name keywords content meta name description cont...