ionic 监听页面滚动,点击停止滚动

类似今日头条,页面上有很多card,点击每个card跳转该card的详情页面。这里有一个问题,当我滚动页面时,会先后触发touchstart、touchmove、touchend,但是当touchend后,页面仍会因为惯性而继续滚动。这个时候,我想点击页面停止滚动,而不是跳转到某个card的详情页面。

原理很简单:设置一个状态,初始值为true,页面滚动时变为false,页面停止滚动,则恢复为true,只有这个值为true时,才能触发跳转事件,即进入card详情页面。

这里需要用到ionic的一个属性:ionic.scroll.isScrolling,只要页面在滚动,其值为true;

代码:

$scope.canGoDetailCard = true;  //一开始默认能跳转进card详情页;

//监听touch事件

window.addEventListener(‘touchstart‘, function() {

  if (ionic.scroll.isScrolling) {  //判断页面是否正在滚动

    $scope.canGoDetailCard = false;  // 如果正在滚动,则点击跳转card详情页失效

    ionic.scroll.isScrolling = false;  //同时停止滚动;

  } else {

    $scope.canGoDetailCard = true; //没有滚动时,跳转进入card详情页

  }

});

$scope.goDetailCard = function() {

  if (!$scope.canGoDetailCard) return; // 如果$scope.canGoDetailCard = false, 则返回

  $state.go(‘card‘);  //进入card详情页

};

时间: 2024-08-09 06:25:13

ionic 监听页面滚动,点击停止滚动的相关文章

监听页面滚动及滚动到指定位置

两种监听页面滚动的方法 一.原生js通过window.onscroll监听window.onscroll = function() {//为了保证兼容性,这里取两个值,哪个有值取哪一个//scrollTop就是触发滚轮事件时滚轮的高度var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;console.log("滚动距离" + scrollTop);} 二.Jquery通过$(wind

react 监听页面滚动

html: // 如果使用typescript, 定义dom类型 private dom: HTMLDivElement | null // ReactJS中,对Div监听只需要绑定 onScrollCapture事件 <div style={{ flex: 1, height: '10000px', overflowY: 'scroll', overflowX: 'hidden', }} ref={dom => {this.dom = dom}} onScrollCapture={() =&

监听页面滚动事件

不知大家在前端开发实践中有没有做过这样一个效果,就是页面布局中有一个顶部通栏的搜索登录框,我们的需求就是当鼠标向下滚动时,顶部通栏始终固定在顶部,并且默认顶部是透明背景,而当页面滚动时,顶部通栏的透明度随着页面卷曲的高度增加而变大,当页面滚动距离超过某一个高度时,透明度就固定不变了.顶部通栏的固定很好实现,只需要令其position属性值为fixed即可,顶部通栏的透明度则通过opacity属性来设置.比较容易出错的地方是这里需要监听页面滚动事件,得到实时的页面滚动距离,从而判断其距离的大小作出

android基础之如何实现触屏监听和鼠标点击事件

直接上代码: android基础之如何实现触屏监听和鼠标点击事件

百度地图2.4.1SDK监听覆盖物的点击事件

最近做项目用的是老版本的百度地图SDK,其中有一个需求是监听普通覆盖物的点击事件,由于这个版本不存在所谓的Marker,普通的覆盖物都是自己写一个类继承 ItemizedOverlay<OverlayItem>.监听点击事件更加麻烦,需要覆盖ItemizedOverlay里面的onTap方法,但是有2个onTap方法,应该覆盖参数是一个(int index)的onTap方法,因为另一个只要是点击地图就会调用,无论点击哪里都是这样,这也不知道为什么. protected boolean onTa

Android 监听按钮的点击事件

onClick事件1.Button和ImageButton都拥有一个onClick事件 通过自身的.setOnClickListener(OnClickListener)方法添加点击事件2.所有的控件都有一个onclick事件 不仅仅Button和ImageButton拥有3.通过点击事件的监听可以实现点击按钮之后要发生什么动作 监听事件实现的集中写法1.匿名内部类的实现2.独立类的实现3.实现接口的方式来实现 package com.example.buttonimagebutton; imp

C# NanUI WinFormium监听页面加载开始\结束

个人博客 地址:https://www.wenhaofan.com/article/20190501213608 因为NanUI文档中仅介绍了Formium窗口的监听,但是没有WinFormium相关的文档,查看源码后才找到监听方法,特此记录一下 public partial class Form1 : WinFormium {public Form1(): base("http://res.app.local/asserts/index.html") { InitializeComp

JQuery监听页面滚动总结

1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2.获取指定元素的页面位置: $(val).offset().top; 3.对页面滚动条滚动的监听:要放在页面加载的时候 $(window).scroll(function(event){ }); 4.设置滚动条到指定位置.$(window).scrollTop(offset).

导航栏监听页面滚动跟随 简单封装

slide('.wedding-title', '.expo-list', 'change','.nav'); //导航条 参数:导航栏父级, 被监听元素 , 导航改变样式,导航栏 function slide(navfather, tClass, activeClass,nav) { var $navfather = $(navfather), $nav = $(nav); $navfather.css({ "position": 'relative' }); var $navfat