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

最新推荐文章于 2023-11-16 17:30:01 发布

weixin_30905133

最新推荐文章于 2023-11-16 17:30:01 发布

阅读量328

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/GarsonZhang/p/10521267.html

版权

<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