精华内容
下载资源
问答
  • 浏览器左右滑动翻页与页面中左右滑动冲突 关于浏览器左右滑动翻页与页面中左右滑动冲突的问题 最近做了一个手机端的网站,用到轮播图(可以左右滑动切换上一张或下一张),发现与浏览器左右滑动前进后退发送冲突,...

    关于浏览器左右滑动翻页与页面中左右滑动冲突的问题
    最近做了一个手机端的网站,用到轮播图(可以左右滑动切换上一张或下一张),发现与浏览器左右滑动前进后退发送冲突,导致轮播图无法手动切换。于是开始寻找解决方法:
    第一种:

    document.addEventListener('touchmove',function(event){
    	event.preventDefault();
    },false);
    

    这种方法是直接禁用浏览器的滑动事件,禁止浏览器左右滑动实现前进后退,可以解决大多数浏览器的问题,不足点是用户体验偏差,如果你用的是搜狗浏览器或者小米手机自带的浏览器,这种方法不起作用。但是如果你用的是 百度浏览器 ,这种方法会导致整个页面无法滑动,只能看到可视区域的内容。所有直接这样写是存在问题的。
    第二种:

    $('.slideshowBox').each(function(index, el) {
    	el.addEventListener('touchmove', function (event) {
    		event.preventDefault();
    	}, false);
    });
    

    slideshowBox是你需要手动滑动的父类,禁止当前区域的浏览器默认事件不会影响浏览器的左右滑动前进后退功能,而且所有浏览器均适配,包括上面说到的第一种方法不适用的三款浏览器。

    展开全文
  • iOS UIScrollView左右滑动

    热门讨论 2014-10-30 09:14:54
    iOS使用UIScrollView实现左右滑动UITableView和UICollectionView
  • iOS左右滑动菜单Demo

    热门讨论 2013-04-23 15:47:17
    实现左右滑动菜单功能,可自定义界面——SlidingMenu
  • js实现手机触屏左右滑动、上下滑动

    热门讨论 2013-01-05 17:35:08
    模仿触屏手机左右滑动,在电脑上可鼠标左右滑动
  • Android 使用Scroller实现绚丽的ListView左右滑动删除Item效果,项目详情http://blog.csdn.net/xiaanming/article/details/17539199
  • Listview左右滑动删除item

    千次下载 热门讨论 2013-11-19 15:48:11
    在listview上面左右滑动,可以出现相应的button,点击button,可以删除相应的item。
  • Vue移动端左右滑动组件

    万次阅读 2021-02-01 14:15:30
    自己根据网上的代码再自己优化下写了个组件, 能够监听用户左右滑动的事件. 自己再通过按需加载,减少数据一次加载过多 <template> <div class="slide" ref='slide' @touchstart='touchStart' ...

    一个业务问题 由于加载的数据过大  之前用Swiper组件一次性加载所有  导致安卓低端手机及苹果内核性能低下导致闪退

    自己根据网上的代码再自己优化下写了个组件, 能够监听用户左右滑动的事件.  自己再通过按需加载,减少数据一次加载过多

    <template>
      <div class="slide" ref='slide' @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="{transform: translateX}">
        <slot></slot>
      </div>
    </template>
    
    <script>
      export default {
        name: 'slide',
        data() {
          return {
            startX: 0, //开始触摸的位置
            endX: 0, //结束触摸的位置
            disX: 0, //移动距离
            lastX: 0, //上一次X坐标
            lastY: 0, //上一次Y坐标
            translateX: 'translateX(0px)'
          }
        },
        methods: {
          touchStart: function (ev) {
            ev = ev || event;
            // console.log(ev.targetTouches);
            // console.log(ev.changedTouches);
            if (ev.touches.length == 1) { //tounches类数组,等于1时表示此时有只有一只手指在触摸屏幕
              this.startX = this.lastX = ev.touches[0].clientX; // 记录开始位置
              this.lastY = ev.touches[0].clientY;
            }
          },
          touchMove: function (ev) {
            ev = ev || event;
            let slideWidth = this.$refs.slide.offsetWidth; //$refs 减少获取dom节点的消耗
            // console.log(ev.targetTouches);
            // console.log(ev.changedTouches);
            if (ev.touches.length == 1) {
              // 实时的滑动的距离-起始位置=实时移动的位置
              this.disX = this.lastX - this.startX;
              // 计算两次移动距离Y>X就不启动滑动动画,防止误滑
              var disX = ev.touches[0].clientX - this.lastX
              var disY = ev.touches[0].clientY - this.lastY
              // console.log(disX, disY);
              if (Math.abs(disX) > Math.abs(disY)) {
                this.translateX = 'translateX(' + this.disX + 'px)';
              }
              // 记录一次坐标值
              this.lastX = ev.touches[0].clientX;
              this.lastY = ev.touches[0].clientY;
            }
          },
          touchEnd: function (ev) {
            ev = ev || event;
            let slideWidth = this.$refs.slide.offsetWidth;
            if (ev.changedTouches.length == 1) {
              let endX = ev.changedTouches[0].clientX;
              this.disX = endX - this.startX;
              // console.log(this.disX, 'this.disX')
              // console.log((slideWidth / 2), 'slideWidth/2');
              this.translateX = 'translateX(0px)';
              // 只有滑动大于一半距离才触发
              if (Math.abs(this.disX) > (slideWidth / 2)) {
                if (this.disX < 0) {
                  console.log('左滑');
                  this.$emit('change', 'left')
                } else {
                  console.log('右滑');
                  this.$emit('change', 'right')
                }
              }
            }
          }
        }
      }
    
    </script>
    

     

    展开全文
  • 滑动事件左右滑动

    千次阅读 2017-07-19 20:28:52
    滑动事件左右滑动:function slideEvent(id) { var UlWidth = 0; var touchStart, touchEnd, moveLength, startML, maxML; var $shop2 = $('#' + id); $shop2.find('li').each(function(){ UlWidth +=

    滑动事件左右滑动:

    function slideEvent(id) {
        var UlWidth = 0;
        var touchStart, touchEnd, moveLength, startML, maxML;
        var $shop2 = $('#' + id);
        $shop2.find('li').each(function(){
            UlWidth += $(this).outerWidth();
        })
        $shop2.width(UlWidth);
        maxML = UlWidth - $(window).width();
        if(maxML > 0){
            $shop2.bind('touchstart', function(e){
                touchStart = e.originalEvent.targetTouches[0].pageX;
                startML = $shop2.css('margin-left');
            }).bind('touchmove', function(e){
                touchEnd = e.originalEvent.targetTouches[0].pageX;
                moveLength = touchEnd - touchStart + parseInt(startML);
                $shop2.css('margin-left', moveLength)
            }).bind('touchend', function(){
                if(moveLength > 0){
                    moveLength = 0;
                }else if(moveLength < -maxML){
                    moveLength = -maxML;
                }
                $shop2.animate({'marginLeft': moveLength}, 200);
            })
        }
    }
    slideEvent('shop2');
    

    注:id 为绑定的 唯一标识如:

    <div id="shop2"></div>
    
    展开全文
  • 支持手机触摸屏左右滑动的js轮播效果代码

    千次下载 热门讨论 2014-05-10 14:51:38
    今天个小伙伴们分享一个好东西,webApp轮播效果,支持手机上用手左右滑动的效果,因为手机的触摸事件和PC端用鼠标操作的事件是不同的,所以我就需要针对移动端的设备触摸事件做相应的轮播特效。大家可以去看下易迅的...
  • 禁止ViewPager左右滑动

    千次阅读 2019-04-26 22:38:35
    但是咸鱼的是不可以左右滑动的,怎么禁止ViewPager左右滑动呢? 建一个ViewPager的子类,重写它的 onInterceptTouchEvent 和onTouchEvent方法: package com.up.uwei.shshop.view; import android.content.Cont....

    最近在做一个二手校园交易平台的毕设,想达到仿咸鱼的tab效果。目前效果:

    但是咸鱼的是不可以左右滑动的,怎么禁止ViewPager左右滑动呢?

    建一个ViewPager的子类,重写它的 onInterceptTouchEvent 和 onTouchEvent方法:

    package com.up.uwei.shshop.view;
    
    import android.content.Context;
    import android.support.v4.view.ViewPager;
    import android.util.AttributeSet;
    import android.view.MotionEvent;
    
    public class NoSwipeViewPager extends ViewPager {
        private boolean canSwipe = true;
        public NoSwipeViewPager(Context context, AttributeSet attributeSet){
            super(context, attributeSet);
        }
        public void setCanSwipe(boolean canSwipe)
        {
            this.canSwipe = canSwipe;
        }
        @Override
        public boolean onTouchEvent(MotionEvent ev) {
            return canSwipe && super.onTouchEvent(ev);
        }
    
        @Override
        public boolean onInterceptTouchEvent(MotionEvent ev) {
            return canSwipe && super.onInterceptTouchEvent(ev);
        }
    }
    

    接着在布局里使用NoSwipeViewPager:

    然后在Activity里通过findById拿到我们的NoSwipeViewPAger,接着调用:

    然后运行结果:

    ok,已经不能左右滑动,只能通过替补tab来控制,

    但是有一个问题,每次切换fragment都有一个动画,比如从 “导航” 到 “我的”,中间有动画,不想要怎么办?

    答:

    mViewPager.setCurrentItem(3, false);

    最后运行结果:

    嘿嘿,over....

    展开全文
  • android Gridview左右滑动 能定位

    热门讨论 2012-11-12 11:52:49
    android Gridview左右滑动 并能定位
  • 在使用scroll-view组件的时候发觉无法左右滑动,经过测试才发觉有一个坑。直接用这个组件的时候还不可以左右滑动,还要设置一下样式才可以。需要设置的就是这个white-space属性为nowrap,也就是强制不换行,这样才...
  • 可以左右滑动的ListView

    热门讨论 2011-10-10 15:59:57
    可以左右滑动的ListView,这是完整的源码,下载后可直接运行
  • Android 利用ViewPager实现类微信的左右滑动效果

    千次下载 热门讨论 2014-09-19 17:41:34
    Android利用ViewPager实现类微信的左右滑动效果,详细代码注解解析setOnPageChangeListener各参数意义以及使用方法
  • 主要实现左右滑动菜单效果,他可以点击主界面上的按钮来显示左右菜单,也可以通过左右滑动来显示,希望可以帮到你哦!!
  • Listview的左右滑动实现

    热门讨论 2012-03-28 09:46:12
    实现了listview的左右滑动。当您的界面里面含有listview的时候,你仍然可以使用手势监听器,滑动切换activity
  • android左右滑动监听,上下滑动

    千次阅读 2017-11-28 13:39:13
    android左右滑动监听,上下滑动
  • 解决前端左右滑动和上下滑动的时间冲突
  • Android ListView左右滑动删除Item效果

    千次下载 热门讨论 2015-07-18 23:46:57
    Android 使用NineOldAndroids开源UI框架实现绚丽的ListView左右滑动删除Item效果。欢迎下载。
  • 卡片左右滑动 带动任务条滑动 vue

    千次阅读 2019-03-27 15:47:24
    接到一个任务,做一个活动卡片,卡片左右滑动带动卡片上方的任务条走到对应节点: 1、卡片和任务条均为动态生成 2、卡片底部可以左右滑动 3、当一张卡片超过50%的区域展示出来后放手,定位到对应卡片 4、卡片更换...
  • js左右滑动手势

    千次阅读 2020-01-07 14:03:51
    js左右滑动手势 在一定端最常用的事件之一会就是滑动了,但是js却未给我们提供相应的方式方法,所以只能自己封装了 实现心路历程 首先要判断滑动的两个大方向,垂直和水平 ,通过touchmove和touchstart的 坐标...
  • Android 使用NineOldAndroids实现绚丽的ListView左右滑动删除Item效果,仿Android通知栏的滑动删除功能,详情详情http://blog.csdn.net/xiaanming/article/details/18311877
  • Flutter PageView左右滑动切换视图

    千次阅读 2019-07-05 07:06:06
    Flutter PageView左右滑动切换视图
  • uwp ListView 左右滑动

    2016-06-08 08:25:10
    uwp ListView 如何实现 左右滑动出现删除按钮的功能 求解
  • android - ViewPager 监听左右滑动

    万次阅读 2016-10-19 17:01:09
    android ViewPager 监听左右滑动,使用setOnPageChangeListener中的onPageScrollStateChanged来监听,其中onPageScrollStateChanged参数: public void onPageScrollStateChanged(int arg0) 此方法是在状态...
  • viewpager 动态加载数据,左右滑动加载,已测试通过
  • 如何实现APP左右滑动DIV切换或图片滑动CSS 作者:张国军_Suger 开发工具与关键技术:HBuilderX C#、HTML         由于之前没有接触过APP之类的项目,今年才开始接触,...
  • uniapp实现页面左右滑动,上下滑动事件 <view class="container" @touchstart="start" @touchend="end"> <view> 添加方法: start(e){ this.startData.clientX=e.changedTouches[0].clientX; ...
  • Android实现图片左右滑动效果

    热门讨论 2014-04-05 17:31:56
    Android实现图片左右滑动效果 代码很简单,就一个Activity,很好学习的 可以联系我一起学习,交流哈
  • 如题所示,怎样禁止微信移动端左右滑动事件?通过监听touchmove事件嘛?通过pageX?然后e.preventDefault()?这样不会把上下滑动的事件禁止了嘛?仅仅只是禁止左右滑动事件的话怎么做的啊?各位大神求教!

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 79,032
精华内容 31,612
关键字:

左右滑动