vue移动端滚动鼠标按下效果

骑猪看日落 2021-12-23 04:43 230阅读 0赞

<div class="item" :id="item.RowID" @touchstart="touchstart(item.RowID)" @touchend="touchend(item.RowID)" v-for="(item,index) in dataList" :key="item.RowID" @click.stop="onview(item.RowID)">
    ***
    </div>

touchstart(id){
          document.getElementById(id).classList.add('item-touch');
          // console.log('touchstart');
        },
        touchend(id){
          // console.log('touchend');
          document.getElementById(id).classList.remove('item-touch');
        },

.item {
        
      margin: 5px;
      border-radius: 10px;
      background: white;
      border-style: ridge;
      border-width: 2px;
      border-color: white;
      border-left-style: none;
      border-right-style: none;
      
      &.item-touch{
        background: #eeeeee;
      }
    }

//添加点击效果

function FunDJXG(o) \{  
        o.on("touchstart", function () \{  
            $(this).addClass("clickResponse");  
        \});  
        o.on("touchend", function () \{  
            $(this).removeClass("clickResponse");  
        \});  
    \},

js调用：

//添加点击效果  
    var clickResp = $(".jia,.jian,.Car\_Area,.History");  
    FunDJXG(clickResp);

样式css:

.clickResponse \{ background-color: \#227dc3; opacity: 0.5; \}

转载于:https://www.cnblogs.com/GarsonZhang/p/10521267.html

发表评论取消回复

表情：

评论列表（有 0 条评论，230人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue实现简单的鼠标拖拽滚动效果

使用插件：vue-dragscroll 使用方法：[csdn教程博客][csdn] [官网使用案例][Link 1] [csdn]: https://blog.csdn

末蓝、/ 2022年11月18日 13:50/ 0 赞/ 320 阅读

相关移动端横向滚动

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8">

朱雀/ 2022年10月02日 14:55/ 0 赞/ 168 阅读

相关快速生成漂亮的移动端视差滚动效果

[![ffec7a1e-9414-4658-aa23-23b745cc4b85.jpg][]][ffec7a1e-9414-4658-aa23-23b745cc4b85.jpg

矫情吗；*/ 2022年08月14日 03:36/ 0 赞/ 144 阅读

相关纯css，div隐藏滚动条，保留鼠标滚动效果。

当我们的内容超出了我们的div，往往会出现滚动条，影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条，也不希望超出去的内容

浅浅的花香味﹌/ 2022年06月04日 05:11/ 0 赞/ 270 阅读

相关移动端禁止页面滚动

H5页面超过一屏，点击某处弹出弹出框提示，默认情况下，页面还可以滑动。解决方法： //添加禁止屏幕滚动 document.querySelector('.eleme

喜欢ヅ旅行/ 2022年05月21日 11:26/ 0 赞/ 241 阅读

相关移动端滚动插件 BetterScroll

BetterScroll 详细介绍 [BetterScroll][] 是一款重点解决移动端各种滚动场景需求的开源插件，适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用

落日映苍穹つ/ 2022年05月18日 09:41/ 0 赞/ 284 阅读

相关在移动端显示滚动条

在移动端，滚动条会自动隐藏，如果想显示要怎么办呢？ .left\{ width: pxTorem(170px); overflow: hidden; overflow-

水深无声/ 2022年05月14日 05:41/ 0 赞/ 348 阅读

相关 js鼠标滚轮滚动图片切换效果

效果体验网址：[http://keleyi.com/keleyi/phtml/image/12.htm][http_keleyi.com_keleyi_phtml_image_

谁践踏了优雅/ 2022年03月31日 03:20/ 0 赞/ 373 阅读

相关 vue移动端滚动鼠标按下效果

<div class="item" :id="item.RowID" @touchstart="touchstart(item.RowID)" @touchend="t

骑猪看日落/ 2021年12月23日 04:43/ 0 赞/ 231 阅读

相关 JavaScript经典案例之按下拖拽、跟随鼠标移动

<!DOCTYPE html> <html> <head lang="en"> <meta charset="GBK">

￡神魔★判官ぃ/ 2021年07月24日 21:46/ 0 赞/ 392 阅读