精华内容
下载资源
问答
  • 一 、问题: 今天遇到这样问题,给某个元素同时绑定touchStart及click事件后,若在移动设备上,当你点击时,会依次出发这两个...在touchstart中添加 e.preventDefault()就可以阻止click事件触发。 模板 <ul class
  • <template> <div id="SlideBar" class="box">...div class="item" ref="slide" :style="slideStyle" @touchstart="start($event)" @touchmove="move($event)" @touchend="end($event)">...
    <template>
        <div id="SlideBar" class="box">
            <div class="item" ref="slide" :style="slideStyle" @touchstart="start($event)" @touchmove="move($event)" @touchend="end($event)">
              <img src="../../../static/lun.1.jpg" alt="">
              <div class="right">
                
              </div>
            </div>
            <div class="btn" ref="btn">
                <button>编辑</button>
                <button style="background:#387ef5;color:#fff">收藏</button>
            </div>
        </div>
    </template>
    <script>
        export default {
            name: 'SlideBar',
            props: {
    
            },
            data (){
                return {
                    flag: false,
                    startX: 0,
                    endX: 0,
                    slideStyle: {
                        left: 0,
                        transition: 'none'
                    }
                }
            },
            methods: {
                start (e){  //记录开始滑动屏幕的X轴的位置
                    this.flag = true;
                    this.startX = e.touches[0].clientX;
                    this.endX = this.$refs.slide.offsetLeft;
                    this.slideStyle.transition = 'none';
                },
                move (e){
                    if(this.flag){
                        // 处理鼠标移动的逻辑
                        var moveX = this.endX + (e.touches[0].clientX - this.startX);  //计算滑动的距离
                        if(Math.abs(moveX) >= this.$refs.btn.offsetWidth && moveX < 0){  //判断滑动的距离是否大于class:btn的宽度
                            moveX = (Math.abs(moveX) - this.$refs.btn.offsetWidth) * 0.1; // 0.3阻力系数
                            this.slideStyle.left = - this.$refs.btn.offsetWidth - moveX + 'px';
                        }else if(moveX >= 0){  //滑动距离是否大于等于0
                            this.slideStyle.left = 0 + 'px';  //大于等于0让class:item等于0
                        }else{
                            this.slideStyle.left = moveX + 'px';  //小于0让class:item等于滑动的距离
                        }
                    }
                },
                end (e){
                    if(this.flag){
                        this.flag = false;
                        // endX = slide.offsetLeft;
                        var moveX = e.changedTouches[0].clientX - this.startX;  //计算滑动的距离
                        this.slideStyle.transition = 'left .3s';
                        var btnWidth = this.$refs.btn.offsetWidth;  //class:btn的宽度
                        if(moveX < 0){
                            if(Math.abs(moveX) >= btnWidth / 2 || Math.abs(this.$refs.slide.offsetLeft) >= this.$refs.btn.offsetWidth){ //是否大于class:btn宽度的一半
                                this.slideStyle.left = - btnWidth + 'px';  //左滑超过class:btn宽度的一半就滑回去
                            }else if(Math.abs(moveX) < btnWidth / 2){  //小于class:btn宽度的一半
                                this.slideStyle.left = 0 + 'px';  //左滑没有超过class:btn宽度的一半回原位
                            }
                        }else if(moveX > 0 && this.endX != 0){
                            if(Math.abs(moveX) >= btnWidth / 2){
                                this.slideStyle.left = 0 + 'px';  //右滑超过class:btn宽度的一半就滑回去
                            }else if(Math.abs(moveX) < btnWidth / 2){
                                this.slideStyle.left = - btnWidth + 'px';  //右滑没有超过class:btn宽度的一半回原位
                            }
                        }
                    }
                }
            },
            mounted (){
                var _this = this;
                // 使用js的现代事件监听transition过渡结束
                this.$refs.slide.addEventListener('transitionend',function(){
                    _this.endX = this.offsetLeft;
                })
            }
        }
    </script>
    <style>
    .box{
        position:relative;
        border-bottom:0.026667rem solid #666666;
    }
    .btn{
      height:100%;
      position:absolute;
      right:0;
      top:0;
      background:red;
      display:flex;
    }
    button{
      width:1.6rem;
      height:100%;
      background:#f8f8f8;
      border:none;
    }
    .item{
      padding:0.266667rem;
      display:flex;
      position:relative;
      background:#fff;
      z-index: 2;
      box-shadow: 0.026667rem 0 0.053333rem #ddd;
    }
    .item img{
      width:2.133333rem;
      height:2.133333rem;
      margin-right:0.4rem;
      border-radius: 0.133333rem;
    }
    
    .item .title{
      font-size:0.48rem;
      float: left;
    }
    .item .text{
      font-size:0.426667rem;
      color:#888;
      float: left;
      margin: 0 1.33rem;
    }
    .item .price{
      color:#888;
      float: left;
      margin: 0 1.33rem;
    }
    </style>
    

    效果图:
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • vue项目练习时,在一个详情页通过@touchstart绑定了一个点击返回按钮,通过history.back进行返回。 但是,bug出现了,点击事件似乎并不是只执行了一次,而是在返回之后的页面又一次的进行了点击,导致效果出现极大...

    在vue项目练习时,在一个详情页通过@touchstart绑定了一个点击返回按钮,通过history.back进行返回。
    但是,bug出现了,点击事件似乎并不是只执行了一次,而是在返回之后的页面又一次的进行了点击,导致效果出现极大偏差。

    原来代码是这样的:

    methods: {
        handleToBack () {
            history.back()  
        }
      }
    

    最终通过定时器给点击事件一个延迟:

    handleToBack () {
          setTimeout(() => {
            // bug:此处调用history.back作为返回,一次点击造成多次触发事件,返回后在返回后页面再次点击造成多次触发事件
            // 通过使用定时器,点击之后稍有延迟在进入返回后页面
            history.back()
          }, 100)
        }
    

    虽然解了燃眉之急,但是感觉并不是完美的解决方式,也可能是对touchstart理解有偏差,或者是用法不当,总之还需要努力!!!如果你有更好的解决方案或者更好的理解,可一起探讨。



    路漫漫其修远兮,吾将上下而求索。


    展开全文
  • touchEnd ~~~~~~~~~~~~~~~~ e.targetTouches[0].pageY touchStart ~~~~~~~~~~~~~~~~ e.changedTouches[0].pageY touchMove ~~~~~~~~~~~~~~~~ e.changedTouches[0].pageY

    touchEnd    ~~~~~~~~~~~~~~~~   e.targetTouches[0].pageY

    touchStart    ~~~~~~~~~~~~~~~~   e.changedTouches[0].pageY

    touchMove    ~~~~~~~~~~~~~~~~   e.changedTouches[0].pageY

     

    展开全文
  • 文章目录文章参考问题描述案例使用jquery模拟长按事件Vue模拟长按事件 文章参考 https://www.jianshu.com/p/b3985b95c15b 问题描述 今天在做公纵号的时候,产品要求长按某个按钮或者双击,切换页面;我第一时间...

    文章参考

    1. https://www.jianshu.com/p/b3985b95c15b

    问题描述

    今天在做公纵号的时候,产品要求长按某个按钮或者双击,切换页面;我第一时间想到的是用dblclick事件,但是切换到手机模式,dblclick事件失效了,因此想使用长按功能实现切换,但是在原生的事件中没有长按的事件,查找了资料,了解到长按是通过 touchstart和touchend两个事件来模拟的

    案例

    使用jquery模拟长按事件

    //长按事件
    var time = 0; //初始化起始时间
    $("#main").on("touchstart", "p", function(e) {
        e.stopPropagation();
        time = setTimeout(function() {
      	showAlert();
        }, 500); //这里设置长按响应时间
    });
    
    $("#main").on("touchend", "p", function(e) {
        e.stopPropagation();
        clearTimeout(time);
    });
    function showAlert() {
        alert("你长按了");
    }
    

    或者

    $("#touchArea").on({
    	touchstart: function(e){
    		timeOutEvent = setTimeout("longPress()",500);
    		e.preventDefault();
    	},
    	touchmove: function(){
    				clearTimeout(timeOutEvent); 
    			timeOutEvent = 0; 
    	},
    	touchend: function(){
    		clearTimeout(timeOutEvent);
    		if(timeOutEvent!=0){ 
    			alert("你这是点击,不是长按"); 
    		} 
    		return false; 
    	}
    })
    

    Vue模拟长按事件

    <template>
      <div class="user-info">
        <div class="portrait">
          <img :src="imgUrl" @touchstart="pageChange" @touchend="pageChangeClear"/>
        </div>
      </div>
    </template>
    <script>
      export default {
        data: function() {
          return {
            balance: 0,
            imgUrl: "../assets/images/img_test.png",
            nickname: ''
          }
        },
        methods:{
          pageChangeClear: function (e) {
            e.stopPropagation();
            clearTimeout(this.time);
          },
          // 跳转到复制界面
          pageChange: function (e) {
            e.stopPropagation();
            const that = this;
            this.time = setTimeout(function() {
              that.$router.push({
                path: "/copyUnionid"
              });
            }, 500); //这里设置长按响应时间
          }
        }
      }
    </script>
    <style scoped lang="less">
      .user-info {
        .portrait {
          text-align: center;
          margin-top: 15px;
          img {
            width: 100px;
            height: 100px;
            border-radius: 50px;
          }
        }
      }
    </style>
    
    展开全文
  • vue开发手机端项目时,我们经常会遇到touch和click共存的情况,比如城市选择页面的字母滑动 touch事件在手机端会触发浏览器滑动,所以应给touch事件添加阻止默认行为touchmove.prevent。注意阻止默认行为事件不要...
  • vue中使用Scroll事件

    千次阅读 2018-11-30 09:27:50
    一.固定头部导航栏 1.【vue的touch事件】 &lt;div class="... @touchstart='touchstart' @touchmove='touchmove' @touchend='touchend'&gt; 2.【Method】 touchmove(e){ var scollTop=0...
  • vue开发手机端项目时,我们经常会遇到touch和click共存的情况,比如城市选择页面的字母滑动touch事件在手机端会触发浏览器滑动,所以应给touch事件添加阻止默认行为touchmove.prevent。注意阻止默认行为事件不要...
  • vue中封装swipe组件

    2019-07-16 09:22:00
    <template> <!-- TODO swipe --> <div id="hy-swiper">...div class="swiper" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"> <slot><...
  • vue中click事件不生效

    2020-03-01 15:22:53
    本来没打算写这个,因为之前发现click不生效可以使用touchstart去代替,可是后来发现使用了touchstart后不能在滑动了,其实可以滑动,但是使用click的目的是为了点击后跳转到首页,所以在刚刚准备滑动时,就被跳转到...
  • 移动端title="签字"width="100%":visible.sync="dialogVisible"&...确认签名取消ref="canvas"class="jSignature"tabindex="0"@touchstart="mStart"@touchmove="mMove"@touchend="mEnd">var app = new Vue({el: "...
  • VUE中设置DIV长按事件

    2020-07-07 15:22:28
    方式一: /** * id:div的id * timeout:长按多少秒触发事件 ... document.querySelector('#' + id).addEventListener('touchstart', function (e) { clearTimeout(timeOutEvent); timeOutEvent = setTimeout(func
  • vue开发手机端项目时,我们经常会遇到touch和click共存的情况,比如城市选择页面的字母滑动 touch事件在手机端会触发浏览器滑动,所以应给touch事件添加阻止默认行为touchmove.prevent。注意阻止默认行为事件...
  • 场景: 左右滑动 查询日历上、下一个月的信息...div class="shoppingGuide_page" @touchstart="start($event)" @touchmove="move($event)" @touchend="end($event)"> 方法: // 左右滑动事件 getAngle(angx, a...
  • 添加 .native.prevent 修饰符即可 ... @touchstart.native.prevent="onTouchStart" @touchmove.native.prevent="onTouchMove" @touchend.native.prevent="onTouchEnd" > Hold to Talk </van-button>
  • Vue项目添加手势实现左滑右滑操作左滑右滑等手势可通过监听touchstart和touchmove事件实现touchstart 记录起始坐标touchmove 计算当前位置加上绝对值判断更加精确。右滑关闭data() {return {startX: 0,startY: 0}}...
  • 如何在vue中使用触摸事件

    千次阅读 2018-11-19 09:36:22
    在项目,用mint-ui做了一个下拉刷新的功能。在其他手机都可以,但是在iphonex上当下拉到虚拟键位置,下拉框就会卡住,不会回弹。所以为了不让用户下拉到虚拟键设置了下拉高度和回弹的最大距离,用到了touch事件。 ...
  • 思路:利用一个值判断鼠标的mousedown事件或者移动端的touchstart是否触发,利用另一个值表示鼠标的mousemove和touchmove事件是否触发,如果触发获取鼠标或者点击处相对于屏幕的偏移值,利用dom循环获取参照物相对于...
  • 进入vue项目学习后,时常会出现js导入后的加载顺序不当的报错,本文主要和大家分享vue项目js导入加载顺序详解,希望能帮助到大家。在引入的js:var block = document.getElementById("block");// 绑定touchstart...
  • 在引入better-scroll的组件使用@click事件的时候,点击事件失效,v-on:click、v-bind:click、@click.native都不行,试了一下@touchstart是却是可以的,发现better-scroll的配置没有设置click:true,设置过之后...
  • ps:最近一直在做移动端的项目,先说下需求,点击图片预览,长按删除,之前在图片上帮定了... 1,触屏事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指...
  • 在引入better-scroll的组件使用@click事件的时候,点击事件失效,v-on:click、v-bind:click、@click.native都不行,试了一下@touchstart是却是可以的,发现better-scroll的配置没有设置click:true,设置过之后...
  • vue项目实现按钮可随意移动 组件代码如下: 在项目引入该组件即可 <template> <div v-show="hide" class="move-button" ref="moveBtn" @mousedown="btnDown" @touchstart="btnDown" @mousemove=...
  • 1. 对touch事件的理解: 当手指点下标签时,触发touchstart事件 当手指滑动时,触发touchmove事件 当手指抬起时,触发touchend事件 注意:点击事件会同时触发...但是:滑动到别的位置,事件对象的位置属...
  • vue web移动端使用滑动事件

    千次阅读 2020-06-22 17:52:08
    touchstart 手指开始滑动的位置 touchmove 手指滑动的位置 touchend 手指离开的位置 监听滑动事件 <div @touchstart='touchstart' @touchmove='touchmove'> </div> touchstart (e) { // 如果你要...

空空如也

空空如也

1 2 3 4 5
收藏数 94
精华内容 37
关键字:

vue中touchstart

vue 订阅