在移动端受屏幕大小所限,展示内容很多的时候,就要使部分区域进行滑动。本文展示项目中所有到的几种方式,大家可以看自己的需求选择合适的滑动方式。实现滑动的基本原理,有两个容器A、B,假如A在外层,B在内层;外层的A宽度或高度固定,内层容器B宽度或者高度大于A即可实现滚动。
实现方式
1). ion-scroll
利用ionic自带的滑动指令
1 2 3 4 5 6 7 8 9 | <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实现滑动,用ionic自带的滑动组件实现滑动,ion-scroll其他属性可参考官网文档 </div> </ion-scroll> </ion-content> </ion-view> |
2). css的overflow
1 2 3 4 5 6 7 8 9 10 11 | <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 实现滚动,使用css的overflow属性atuo或者 scroll 实现滚动 使用css的overflow属性atuo或者 scroll 实现滚动,使用css的overflow属性atuo或者 scroll 实现滚动 使用css的overflow属性atuo或者 scroll 实现滚动,使用css的overflow属性atuo或者 scroll 实现滚动 </div> </div> </ion-content> </ion-view> |
·overflow:auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
·overflow:scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
注:使用这种方式,ion-content需要添加overflow-scroll="true"指令,表示使用系统自己的滚动来代替ionic的scroll,ionic是实现了自己的一套滚动方式的。
监听touch事件
1 2 3 4 5 | < 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;" > {{d}} </ div > </ div > |
对应的js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | 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(); } }); }) |
通过监听手指的touchstart、touchmove事件,获得滑动的距离,调用外部容器div的滚动条滚动到对应距离。
·$(selector).scrollLeft(position):设置元素的水平滚动位置
·$(selector).scrollTop(position):设置元素的垂直滚动位置
最后,再使用angularjs的指令,讲滚动的监听封装为一个指令,方便以后滑动时候使用。
在directive.js中添加:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 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。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < 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;" > 地区{{d}} </ 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;" > {{d}}每行 </ div > </ div > </ div > </ div > |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
如对本文有疑问,请提交到交流社区,广大热心网友会为你解答!! 点击进入社区
联系客服