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 相关文章推荐
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
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中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
php 短链接算法收集与分析
2011/12/30 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
javascript getElementsByTagName
2011/01/31 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
python中星号变量的几种特殊用法
2016/09/07 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
Html5定位终极解决方案
2020/02/05 HTML / CSS
专营店会计助理岗位职责
2013/11/29 职场文书
物业客服专员岗位职责
2013/11/30 职场文书
应用化学专业职业生涯规划书
2014/01/22 职场文书
小学教师师德反思
2014/02/03 职场文书
小学母亲节活动方案
2014/03/14 职场文书
个人借款担保书
2014/04/02 职场文书
2016年少先队活动总结
2016/04/06 职场文书
创业计划书之宠物店
2019/09/19 职场文书
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫
MySQL数据库 安全管理
2022/05/06 MySQL