ionic 實現滑動的三種方式

#1 前言

在移動端受螢幕大小所限，展示內容很多的時候，就要使部分區域進行滑動。本文展示專案中所有到的幾種方式，大家可以看自己的需求選擇合適的滑動方式。實現滑動的基本原理，有兩個容器a、b,假如a在外層，b在內層；外層的a寬度或高度固定，內層容器b寬度或者高度大於a即可實現滾動。

#2 實現方式

##1. ion-scroll

利用ionic自帶的滑動指令

view-title
="dashboard"
>
class
="padding"
has-bouncing
="false"
>
has-bouncing
="false"
style
="width
:100px;
border
:solid 1px red;
" direction
="x"
>
style
="width
:200px;
">
ion-scroll實現滑動，用ionic自帶的滑動元件實現滑動，ion-scroll其他屬性可參考官網文件
div>
ion-scroll
>
ion-content
>
ion-view
>

##2. css的overflow

使用css的overflow屬性atuo或者scroll實現滾動，使用css的overflow屬性atuo或者scroll實現滾動使用css的overflow屬性atuo或者scroll實現滾動，使用css的overflow屬性atuo或者scroll實現滾動使用css的overflow屬性atuo或者scroll實現滾動，使用css的overflow屬性atuo或者scroll實現滾動

##3. 監聽touch事件

style
="width
:100%;
border
:solid 1px;
height
:60px;
overflow
: hidden;
white-space
:nowrap;
padding
:10px 20px;
" id
="dash_scroll_container"
>
ng-repeat
="d in datas"
style
="margin-right
:20px;
border
:solid 1px #ffc900;
height
:100%;
width
:100px;
display
:inline-block;
text-align
:center;
line-height
:40px;
">
}div
>
div>

對應的js

angular.
module
('starter.controllers',[
]).controller
('dashctrl'
,function
($scope));
$domscroll.on(
"touchmove"
,function
(e)else
if( math.
abs(y)
> math.
abs(x)
)function
scrollleft
(obj,x)
function
scrolltop
(obj,y)})
;})

通過監聽手指的touchstart、touchmove事件，獲得滑動的距離，呼叫外部容器div的滾動條滾動到對應距離。

最後，再使用angularjs的指令，講滾動的監聽封裝為乙個指令，方便以後滑動時候使用。

在directive.js中新增：

angular.
module
('starter.directives',[
]).directive
('myscroll'
,function()
);$domscroll.on(
"touchmove"
,function
(e)else
if( math.
abs(y)
> math.
abs(x)
)function
scrollleft
(obj,x)
function
scrolltop
(obj,y)})
;}return;}
);

這樣封裝後使用起來就方便了，在需要滑動的元素上加上指令 my-scroll。

my-scroll
style
="border
:slateblue solid 1px;
width
:100%;
height
:300px;
overflow
: hidden;
margin
:0;padding
:0;"
class
="row"
>
class
="col-20"
>
ng-repeat
="d in datas"
style
="margin-bottom
:20px;
border
:solid 1px #007aff;
height
:80px;
text-align
:center;
line-height
:80px;
">
地區}div
>
div>
class
="col-80"
>
style
="width
:200%;
border
:solid 1px #009689;
overflow
: hidden;
white-space
: nowrap;
">
ng-repeat
="d in datas"
style
="margin-bottom
:20px;
border
:solid 1px #ffc900;
height
:80px;
text-align
:center;
line-height
:80px;
">
}每行div
>
div>
div>
div>

ionic 實現滑動的三種方式

json三種實現方式

cmdb實現三種方式

https實現三種方式

ionic 實現滑動的三種方式

json三種實現方式

cmdb實現三種方式

https實現三種方式

相關推薦