ionic實現(xiàn)滑動的三種方式
更新時間：2016年08月27日 15:34:45 作者：lishihong108
這篇文章主要為大家詳細介紹了ionic實現(xiàn)滑動的三種方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在移動端受屏幕大小所限，展示內容很多的時候，就要使部分區(qū)域進行滑動。本文展示項目中所有到的幾種方式，大家可以看自己的需求選擇合適的滑動方式。實現(xiàn)滑動的基本原理，有兩個容器A、B,假如A在外層，B在內層；外層的A寬度或高度固定，內層容器B寬度或者高度大于A即可實現(xiàn)滾動。
實現(xiàn)方式
1）. ion-scroll
利用ionic自帶的滑動指令
<ion-view view-title="Dashboard">
<ion-content class="padding" has-bouncing="false">
<ion-scroll has-bouncing="false" style="width:100px;border:solid 1px red;" direction="x">
<div style="width:200px;">
ion-scroll實現(xiàn)滑動，用ionic自帶的滑動組件實現(xiàn)滑動，ion-scroll其他屬性可參考官網(wǎng)文檔
</div>
</ion-scroll>
</ion-content>
</ion-view>
2）. css的overflow
<ion-view view-title="Dashboard">
<ion-content class="padding" has-bouncing="false" overflow-scroll="true">
<div style="width:160px;height:300px;border:solid 1px red;overflow: auto;padding:20px;">
<div style="width:400px;height:500px;border:solid 1px blueviolet">
使用css的overflow屬性atuo或者scroll實現(xiàn)滾動，使用css的overflow屬性atuo或者scroll實現(xiàn)滾動
使用css的overflow屬性atuo或者scroll實現(xiàn)滾動，使用css的overflow屬性atuo或者scroll實現(xiàn)滾動
使用css的overflow屬性atuo或者scroll實現(xiàn)滾動，使用css的overflow屬性atuo或者scroll實現(xiàn)滾動
</div>
</div>
</ion-content>
</ion-view>
•overflow:auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
•overflow:scroll內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
注：使用這種方式，ion-content需要添加overflow-scroll="true"指令，表示使用系統(tǒng)自己的滾動來代替ionic的scroll，ionic是實現(xiàn)了自己的一套滾動方式的。
監(jiān)聽touch事件
<div style="width:100%;border:solid 1px;height:60px;overflow: hidden;white-space:nowrap;padding:10px 20px;" id="dash_scroll_container">
<div 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;">
{drjdfhx}
</div>
</div>
對應的js
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {
$scope.datas=[1,2,3,4,5,6,7,8,9,10];
var startX=0,startY=0;
var $domScroll=$("#dash_scroll_container");
$domScroll.on("touchstart",function(e){
startX=e.originalEvent.changedTouches[0].pageX;
startY=e.originalEvent.changedTouches[0].pageY;
console.log("start:("+startX+","+startY+")"+"--"+$(this).scrollTop());
});
$domScroll.on("touchmove",function(e){
var x = e.originalEvent.changedTouches[0].pageX-startX;
var y = e.originalEvent.changedTouches[0].pageY-startY;
if ( Math.abs(x) > Math.abs(y)) {//左右滑動
scrollLeft($(this),x);
}else if( Math.abs(y) > Math.abs(x)){//上下滑動
scrollTop($(this),y);
}
function scrollLeft(obj,x){
var currentScroll = obj.scrollLeft();
console.log(parseInt(currentScroll)-x);
obj.scrollLeft(parseInt(currentScroll)-x);//滑動的距離
e.preventDefault();
e.stopPropagation();
}
function scrollTop(obj,y){
var currentScroll = obj.scrollTop();
console.log(parseInt(currentScroll)-y);
obj.scrollTop(parseInt(currentScroll)-y);//滑動的距離
e.preventDefault();
e.stopPropagation();
}
});
})
通過監(jiān)聽手指的touchstart、touchmove事件，獲得滑動的距離，調用外部容器div的滾動條滾動到對應距離。
•$(selector).scrollLeft(position)：設置元素的水平滾動位置
•$(selector).scrollTop(position)：設置元素的垂直滾動位置
最后，再使用angularjs的指令，講滾動的監(jiān)聽封裝為一個指令，方便以后滑動時候使用。
在directive.js中添加：
angular.module('starter.directives', [])
.directive('myScroll',function(){
function link($scope, element, attrs) {
var $domScroll=$(element[0]);
var startX=0,startY=0;
$domScroll.on("touchstart",function(e){
startX=e.originalEvent.changedTouches[0].pageX;
startY=e.originalEvent.changedTouches[0].pageY;
console.log("start:("+startX+","+startY+")"+"--"+$(this).scrollTop());
});
$domScroll.on("touchmove",function(e){
var x = e.originalEvent.changedTouches[0].pageX-startX;
var y = e.originalEvent.changedTouches[0].pageY-startY;
if ( Math.abs(x) > Math.abs(y)) {//左右滑動
scrollLeft($(this),x);
}else if( Math.abs(y) > Math.abs(x)){ //上下滑動
scrollTop($(this),y);
}
function scrollLeft(obj,x){
var currentScroll = obj.scrollLeft();
console.log(parseInt(currentScroll)-x);
obj.scrollLeft(parseInt(currentScroll)-x);//滑動的距離
e.preventDefault();
e.stopPropagation();
}
function scrollTop(obj,y){
var currentScroll = obj.scrollTop();
console.log(parseInt(currentScroll)-y);
obj.scrollTop(parseInt(currentScroll)-y);//滑動的距離
e.preventDefault();
e.stopPropagation();
}
});
}
return {
restrict: 'A',
link: link
};
});
這樣封裝后使用起來就方便了，在需要滑動的元素上加上指令 my-scroll。
<div my-scroll style="border:slateblue solid 1px;width:100%;height:300px;overflow: hidden;margin:0;padding:0;" class="row">
<div class="col-20">
<div ng-repeat="d in datas" style="margin-bottom:20px;border:solid 1px #007AFF;height:80px;text-align:center;line-height:80px;">
地區(qū){5j3nzf1}
</div>
</div>
<div class="col-80">
<div style="width:200%;border:solid 1px #009689;overflow: hidden;white-space: nowrap;">
<div ng-repeat="d in datas" style="margin-bottom:20px;border:solid 1px #FFC900;height:80px;text-align:center;line-height:80px;">
{1t33br3}每行
</div>
</div>
</div>
</div>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
tab選項卡效果就是當我指上或經(jīng)過時就會顯示這個選項卡下面的內容，下面我來給大家介紹一款純js實現(xiàn)的TAB選項卡效果，有需要的朋友可以參考一下2013-08-08
我們不得面對這樣一個事實：許多程序員不會規(guī)劃他們的JS代碼。我們經(jīng)?？焖賹懲甏a、運行、提交。但當我們繼續(xù)開發(fā)遇到變量和函數(shù)時不得不再次回頭查看它們代表的含義，麻煩就從這里開始了。2013-04-04
下面小編就為大家?guī)硪黄猵romise處理多個相互依賴的異步請求(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
JavaScript 實現(xiàn)自己的安卓手機自動化工具腳本(推薦)
這篇文章主要介紹了 JavaScript 實現(xiàn)自己的安卓手機自動化工具腳本,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
這篇文章主要介紹了小程序如何定位所在城市及發(fā)起周邊搜索，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
這篇文章主要介紹了微信小程序實現(xiàn)點擊卡片 翻轉效果本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
JavaScript是一種功能強大的編程語言，具有許多高級特性，本文將介紹JavaScript中的一些高級特性，包括閉包、原型繼承、高階函數(shù)、異步編程和模塊化，希望對大家有所幫助2023-06-06
這篇文章主要介紹了JS版元素周期表實現(xiàn)方法,可實現(xiàn)基于javascript動態(tài)生成元素周期表的功能,點擊元素項可以在下方顯示對應元素的各種常用屬性,需要的朋友可以參考下2015-08-08
本篇文章主要是對JS中設置readOnly值的方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
還在一味沒有目的的編寫JavaScript代碼嗎？那么你就OUT了！讓我們一起來看看小編為大家搜羅的JavaScript開發(fā)人員應該具備的十大關鍵習慣吧2014-12-12