ionic实现滑动的三种方式


Posted in Javascript onAugust 27, 2016

在移动端受屏幕大小所限,展示内容很多的时候,就要使部分区域进行滑动。本文展示项目中所有到的几种方式,大家可以看自己的需求选择合适的滑动方式。实现滑动的基本原理,有两个容器A、B,假如A在外层,B在内层;外层的A宽度或高度固定,内层容器B宽度或者高度大于A即可实现滚动。

实现方式

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实现滑动,用ionic自带的滑动组件实现滑动,ion-scroll其他属性可参考官网文档
      </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实现滚动,使用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事件

<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

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中添加:

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;">
      地区{{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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 对象的定义方法
Jan 10 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
JAVASCRIPT keycode总结
Feb 04 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
js简易版购物车功能
Jun 17 Javascript
vue弹窗消息组件的使用方法
Sep 24 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
js select实现省市区联动选择
Apr 17 #Javascript
轻松掌握JavaScript装饰者模式
Aug 27 #Javascript
node.js实现快速截图
Aug 27 #Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 #Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 #Javascript
轻松掌握JavaScript享元模式
Aug 27 #Javascript
JavaScript编码风格指南(中文版)
Aug 26 #Javascript
You might like
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
js获取url中指定参数值的示例代码
2013/12/14 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
express express-session的使用小结
2018/12/12 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
Python写的一个简单DNS服务器实例
2014/06/04 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
Python爬取梨视频的示例
2021/01/29 Python
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
护士演讲稿范文
2014/01/05 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
社区务虚会发言材料
2014/10/20 职场文书
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python