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; }
vue移动端 滚动 鼠标按下效果的更多相关文章
- 模拟鼠标向下滚动 http://bbs.2ccc.com/topic.asp?topicid=461769
我想模拟鼠标滚轮,下面的代码能向上滚动,怎么样下向滚动啊 mouse_event( MOUSEEVENTF_WHEEL,0,0,WHEEL_DELTA,0); 我把参数设置为mouse_event( ...
- JS判断鼠标向上滚动还是向下滚动
js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...
- 利用伪元素和css3实现鼠标移入下划线向两边展开效果
一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的. 二.实现: 1.首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设 ...
- 转帖 利用伪元素和css3实现鼠标移入下划线向两边展开效果
原帖地址 https://www.cnblogs.com/yangjunfei/p/6739683.html 感谢分享 一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度 ...
- Vue项目移动端滚动穿透问题
概述 今天在做 Vue 移动端项目的时候遇到了滚动穿透问题,在网上查资料后,选取了我觉得最好的方法,记录下来供以后开发时参考,相信对其他人也有用. 上层无需滚动 如果上层无需滚动的话,直接屏蔽上层的 ...
- 基于jquery鼠标或者移动端滚动加载数据
基于jquery鼠标或者移动端滚动加载数据 var stop = true; // 防止重复请求数据 $(window).scroll(function () { totalheight = pars ...
- [vue] vue服务端渲染nuxt.js
初始化 使用脚手架工具 create-nuxt-app 快速创建 npx create-nuxt-app <项目名> npx create-nuxt-app 执行一些选择 在集成的服务器端 ...
- 【JS】341- 移动端滚动穿透的6种解决方案
前言 相信能看到这篇文章的你,已经是遇到了这个问题.我就不gif展示问题效果了. 鉴于此问题是面试的常客,故特地针对滚动穿透这个疑难杂症,整理了六个解决方案. 各方法操作难易不同,分别针对弹层和bod ...
- 很全的vue插件汇总,赶紧收藏下(转)
Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作 ...
随机推荐
- spark(1.1) mllib 源码分析(三)-朴素贝叶斯
原创文章,转载请注明: 转载自http://www.cnblogs.com/tovin/p/4042467.html 本文主要以mllib 1.1版本为基础,分析朴素贝叶斯的基本原理与源码 一.基本原 ...
- Asp.net控制Tomcat启动关闭的实现方法
一.场景 近日有个项目客户要求能自己配置相关权限.由于历史原因这个项目采用的是公司以前的权限系统.这个权限系统很强大,不过有个弊端,就是每增加一个权限菜单都要重启才能生效,不然就要等1天它缓存过期后才 ...
- ShadowCaster 代码
Pass { Name "ShadowCaster" Tags{"LightMode" = "ShadowCaster"} CGPROGRA ...
- 3D游戏引擎〇 開始
游戏循环: 初始化:运行一些主要的初始化操作,如内存分配,资源获取.从磁盘载入数据等. 进入游戏循环:进入主游戏循环.用户不断地运行动作,知道退出主循环为止. 读取玩家输入:处理玩家输入,或将其存储到 ...
- C#封装C++DLL(特别是char*对应的string)
1.新建一个C#-Windows-类库(用于创建C#类库(.dll)的项目)类型的工程 2.对于普通C++函数 XXXX_API void cppFun(int i); 在cs代码中添加 [DllIm ...
- Setting up PhoneGap on Ubuntu for Android app development
This is just some notes I made, mostly taken from http://docs.phonegap.com/en/3.0.0/guide_overview_i ...
- PAT 1018 Public Bike Management(Dijkstra 最短路)
1018. Public Bike Management (30) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yu ...
- 面向对象 - 1.封装之如何实现属性的隐藏/2.封装的意义/3.封装与扩展性/4.property的使用
1.封装之如何实现属性的隐藏封装: __x=1 # 把数据属性隐藏 (如何实现隐藏) 类定义阶段 __开头发生了变形 __x --> _A__x特点: 1.在类外部无法直接:obj.__Attr ...
- SpringMVC 之拦截器和异常处理
1. 文件上传 Spring 使用 Jakarta Commons FileUpload 技术实现了一个 MultipartResolver 实现类: CommonsMultipartResolver ...
- Piggy-Bank---hdu1114(完全背包)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1114 题意是有一个存钱罐,当它是空的时候重量为E,满的时候重量为F:已知存钱罐里面有 n 种钱,每种钱 ...