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