ionic css實現帶字的滑動 toggle

2021-07-16 21:21:51 字數 1352 閱讀 3564

由於專案中需要帶字的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...