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 相关文章推荐
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
jQuery实现点击标题输入详细信息
Apr 16 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
React组件的三种写法总结
Jan 12 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 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
Zerg基本策略
2020/03/14 星际争霸
一个用于网络的工具函数库
2006/10/09 PHP
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
jquery ajax执行后台方法
2010/03/18 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
简单的网页广告特效实例
2017/08/19 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
使用python装饰器验证配置文件示例
2014/02/24 Python
python改变日志(logging)存放位置的示例
2014/03/27 Python
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
Python中的全局变量如何理解
2020/06/04 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
html5开发之viewport使用
2013/10/17 HTML / CSS
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
教师绩效考核方案
2014/01/21 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
八年级英语教学反思
2016/02/15 职场文书
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS