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


    <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; }

    慎于行,敏于思!GGGGGG
  • 相关阅读:
    kafka学习笔记:知识点整理
    java操作hbase 增删改查
    json往前台送数据中文乱码
    17年数据结构笔记
    设置MYSQL数据库编码为UTF-8
    c++的 struct和class
    算法之arrays and strings
    对于快速排序的理解
    sql杂记
    Spring搭建练习遇到的坑
  • 原文地址:https://www.cnblogs.com/GarsonZhang/p/10521267.html
Copyright © 2020-2023  润新知