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 相关文章推荐
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
JS排序之快速排序详解
Apr 08 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
一个基于react的图片裁剪组件示例
Apr 18 Javascript
JS异步宏队列微队列原理详解
Sep 09 Javascript
利用 JavaScript 构建命令行应用
Nov 17 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实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
javascript操作JSON的要领总结
2012/12/09 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
node.js中watch机制详解
2014/11/17 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
Python如何读写二进制数组数据
2020/08/01 Python
css3 transform属性详解
2014/09/30 HTML / CSS
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
override和overload的区别
2016/03/09 面试题
淘宝活动策划方案
2014/02/06 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
机关职员工作检讨书
2014/10/23 职场文书
2016年教师节感言
2015/12/09 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
Python中的 Set 与 dict
2022/03/13 Python