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

vue移动端 滚动 鼠标按下效果的更多相关文章

  1. 模拟鼠标向下滚动 http://bbs.2ccc.com/topic.asp?topicid=461769

    我想模拟鼠标滚轮,下面的代码能向上滚动,怎么样下向滚动啊 mouse_event( MOUSEEVENTF_WHEEL,0,0,WHEEL_DELTA,0); 我把参数设置为mouse_event(  ...

  2. JS判断鼠标向上滚动还是向下滚动

    js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...

  3. 利用伪元素和css3实现鼠标移入下划线向两边展开效果

    一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的. 二.实现: 1.首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设 ...

  4. 转帖 利用伪元素和css3实现鼠标移入下划线向两边展开效果

    原帖地址   https://www.cnblogs.com/yangjunfei/p/6739683.html 感谢分享 一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度 ...

  5. Vue项目移动端滚动穿透问题

    概述 今天在做 Vue 移动端项目的时候遇到了滚动穿透问题,在网上查资料后,选取了我觉得最好的方法,记录下来供以后开发时参考,相信对其他人也有用. 上层无需滚动 如果上层无需滚动的话,直接屏蔽上层的 ...

  6. 基于jquery鼠标或者移动端滚动加载数据

    基于jquery鼠标或者移动端滚动加载数据 var stop = true; // 防止重复请求数据 $(window).scroll(function () { totalheight = pars ...

  7. [vue] vue服务端渲染nuxt.js

    初始化 使用脚手架工具 create-nuxt-app 快速创建 npx create-nuxt-app <项目名> npx create-nuxt-app 执行一些选择 在集成的服务器端 ...

  8. 【JS】341- 移动端滚动穿透的6种解决方案

    前言 相信能看到这篇文章的你,已经是遇到了这个问题.我就不gif展示问题效果了. 鉴于此问题是面试的常客,故特地针对滚动穿透这个疑难杂症,整理了六个解决方案. 各方法操作难易不同,分别针对弹层和bod ...

  9. 很全的vue插件汇总,赶紧收藏下(转)

    Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作 ...

随机推荐

  1. 第一百三十七节,JavaScript,封装库---修缮拖拽

    JavaScript,封装库---修缮拖拽 修缮拖拽 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:有参设置拖拽点区块,只有弹窗的这个拖拽点区块才能拖拽,无参整个弹窗可以拖 ...

  2. Android将指定的.class打包到mainDex中

    1️⃣ 我们分包的时候会遇到一个问题,因为加载和初始化的问题,如果某个类不在mainDex中,那么程序就会报错,java.lang.NoClassDefFoundError. 2️⃣ 在gradle中 ...

  3. 【BZOJ】3400: [Usaco2009 Mar]Cow Frisbee Team 奶牛沙盘队(dp)

    http://www.lydsy.com/JudgeOnline/problem.php?id=3400 既然是倍数我们转换成mod.. 设状态f[i][j]表示前i头牛modj的方案 那么答案显然是 ...

  4. 数码相机常用CCD/CMOS尺寸对比

    数码相机的关键元件CCD或CMOS又称为“影像传感器”,其作用相当于感光胶片.CCD尺寸越大,采集光线的效果越好,画面记录的信息就越多,保留的细节也就越丰富,所以图像更完美漂亮. CCD尺寸的大小与像 ...

  5. ModelShowDialog缓存上次浏览的URL

    1. 一种解决方法设置每次清楚浏览的页面. In IE7, go to Tools  |  Internet Options.  Click the Browsing History "Se ...

  6. AndroidManifest.xml文件详解(activity)(一)

    <activity android:allowTaskReparenting=["true" | "false"] android:alwaysRetai ...

  7. Volley使用详细说明

    前一篇粗略的介绍了一下Volley,并在最后附上了一段使用代码,这一篇详细的介绍一下Volley的使用.前面也说了Volley主要获取JSON对象和图片加载,这里也分为两部分介绍. 1.获取JSON对 ...

  8. JS制作一个通用的商城版历史浏览记录

    正在开发一个b2c的国外商城,昨天做了一个历史浏览记录发出来跟大家分享一下. JS: //cookie相关函数 function getCookieVal(offset) {    var endst ...

  9. 【BZOJ4712】洪水 树链剖分优化DP+线段树

    [BZOJ4712]洪水 Description 小A走到一个山脚下,准备给自己造一个小屋.这时候,小A的朋友(op,又叫管理员)打开了创造模式,然后飞到山顶放了格水.于是小A面前出现了一个瀑布.作为 ...

  10. Oracle-Rman(物理备份)

    Rman(物理备份) Rman -recover manager Rman 备份的对象 数据文件 数据文件 (Data File) 控制文件 控制文件 (Control File) 参数文件 参数文件 ...