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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
Vue组件生命周期运行原理解析
Nov 25 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函数
2008/10/03 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
php 修改密码实现代码
2017/05/24 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
python实现倒计时的示例
2014/02/14 Python
python中执行shell命令的几个方法小结
2014/09/18 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
爱普生美国官网:Epson美国
2018/11/05 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
西门豹教学反思
2014/02/04 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
Python图片验证码降噪和8邻域降噪
2021/08/30 Python