多平台统一管理软件接口,如何实现多平台统一管理软件接口
256
2023-07-08
ionic实现滑动的三种方式
在移动端受屏幕大小所限,展示内容很多的时候,就要使部分区域进行滑动。本文展示项目中所有到的几种方式,大家可以看自己的需求选择合适的滑动方式。实现滑动的基本原理,有两个容器A、B,假如A在外层,B在内层;外层的A宽度或高度固定,内层容器B宽度或者高度大于A即可实现滚动。
实现方式
1). ion-scroll
利用ionic自带的滑动指令
ion-scroll实现滑动,用ionic自带的滑动组件实现滑动,ion-scroll其他属性可参考官网文档
2). css的overflow
使用css的overflow属性atuo或者scroll实现滚动,使用css的overflow属性atuo或者scroll实现滚动
使用css的overflow属性atuo或者scroll实现滚动,使用css的overflow属性atuo或者scroll实现滚动
使用css的overflow属性atuo或者scroll实现滚动SsHdCDKxYe,使用css的overflow属性atuo或者scroll实现滚动
•overflow:auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
•overflow:scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
注:使用这种方式,ion-content需要添加overflow-scroll="true"指令,表示使用系统自己的滚动来代替ionic的scroll,ionic是实现了自己的一套滚动方式的。
监听touch事件
{{d}}
对应的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).scrollTophttp://());
});
$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) >http:// 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();
}
});
})
通过监听手指的touchstart、touchmove事件,获得滑动的距离,调用外部容器div的滚动条滚动到对应距离。
•$(selector).scrollLeft(position):设置元素的水平滚动位置
•$(selector).scrollTop(position):设置元素的垂直滚动位置
最后,再使用angularjs的指令,讲滚动的监听封装为一个指令,方便以后滑动时候使用。
在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。
地区{{d}}
{{d}}每行
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~