touch滑动事件---简单小案例
html:
<!--导航栏头部-->
<div class="type_nav">
<ul class="clearfix " v-on:touchstart="touch($event,1)" v-on:touchmove="touch($event,2)" v-on:touchend="touch($event,3)">
<li v-for="(index,main) in mainList">
<div class="nav_con" >
<p>{{main.speciality_name}}</p>
<img v-bind:src="main.icon" alt=""/>
</div>
<span></span>
</li>
</ul>
<div class="right"></div>
</div>
vue-js:
data:{
startPosition:"", //触摸开始位置
endPosition:"", //触摸结束位置
deltaX:null, //滑动的距离
flag:null, //上次滑动的位置
is_click:false, //导航是否被点击
},
//移动端滑动事件
touch: function (e,type) {
var touch = e.touches[0];
//可移动最大宽度
var maxWidth = parseFloat($(".type_nav").css("width"))*0.95;
//隐藏小光标
$(".type_nav").find("span").css("display","none");
//判断触摸状态获取坐标
if(type == 1){
info_vue.startPosition = {
x: touch.pageX
};
}else if(type == 2){
info_vue.endPosition = {
x: touch.pageX
};
}
//判断结束坐标是否为空
if(info_vue.endPosition.x == undefined){
info_vue.deltaX = info_vue.flag;
}else{
info_vue.deltaX = (info_vue.endPosition.x - info_vue.startPosition.x) + info_vue.flag;
}
//判断是否点击向右滑动按钮
if(!info_vue.rightbtnClick){
//判断不能超出相应位置
if(info_vue.deltaX < 0 && info_vue.deltaX > -maxWidth) {
}else if(info_vue.deltaX > 0){
info_vue.deltaX = 0;
}else if(info_vue.deltaX < -maxWidth){
info_vue.deltaX = -maxWidth;
}
$(".type_nav").children("ul").css("left", info_vue.deltaX + "px");
}else{
//判断不能超出相应位置
if(info_vue.deltaX < maxWidth && info_vue.deltaX > 0) {
}else if(info_vue.deltaX > maxWidth){
info_vue.deltaX = maxWidth;
}else if(info_vue.deltaX <0){
info_vue.deltaX = 0;
}
$(".type_nav").children("ul").css("left", info_vue.deltaX-maxWidth + "px");
}
//离开触摸状态
if(type == 3){
info_vue.flag = info_vue.deltaX;
info_vue.endPosition = "";
}
},
效果图:
touch滑动事件---简单小案例的更多相关文章
- react框架实现点击事件计数小案例
下面将以一个小案例来讲解react的框架的一般应用,重点内容在代码段都有详细的解释,希望对大家有帮助 代码块: 代码块: import React from 'react'; import React ...
- 基于Pytorch的简单小案例
神经网络的理论知识不是本文讨论的重点,假设读者们都是已经了解RNN的基本概念,并希望能用一些框架做一些简单的实现.这里推荐神经网络必读书目:邱锡鹏<神经网络与深度学习>.本文基于Pytor ...
- 移动端touch滑动事件监听
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Angular.js路由 简单小案例
代码案例: <html> <head> <meta charset="utf-8"> <title>AngularJS 路由实例&l ...
- angular前端框架简单小案例
一.angular表达式 <head> <meta charset="UTF-8"> <title>Title</title> &l ...
- 关于js中的事件委托小案例
需求:页面上有一个按钮,和一个空的ul,要求点击按钮,会给ul中动态添加li元素,然后,点击动态添加的元素,在控制台上输出,这是第几个元素 <ul> </ul> <but ...
- Vuex-全局状态管理【简单小案例】
前言: Vuex个人见解: 1.state :所有组件共享.共用的数据.理解为不是一个全局变量,不能直接访问以及操作它.2.mutations : 如何操作 state 呢?需要有一个能操作state ...
- 移动端上下滑动事件之--坑爹的touch.js
下面的方法,不知道是操作方法不对还是啥. 在 zepto.js 里面加那一段代码不起作用 百度的 touch.js 是可以用的,但是使用方式 和 zepto有点不一样. 解决方案:参照这个链接地址 ...
- 移动端上下滑动事件之--坑爹的touch.js
原文 http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和htm ...
随机推荐
- Wed Nov 01 13:03:16 CST 2017 WARN: Establishing SSL connection without server's identity verification is not recommended.
报错:Wed Nov 01 13:03:16 CST 2017 WARN: Establishing SSL connection without server's identity verifica ...
- python paramiko模块学习分享
python paramiko模块学习分享 paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接.paramiko支持Linux, Sola ...
- idea在同一窗口创建多个项目(详细步骤)
需要创建的项目目录结构 1.file——>项目结构 2.创建一个新的模块
- 09_springmvc图片上传
一.上传图片 1.需求 在修改商品页面,添加上传商品图片的功能 2.springmvc中对多部件类型解析 在页面form中提交enctype="multipart/form-data&quo ...
- vue-router的访问权限管理
路由守卫(路由钩子.拦截器) vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 可以不登录直接进入系统 ...
- RunLoop运行循环机制
http://www.jianshu.com/p/0be6be50e461 基本概念 进程 进程是指在系统中正在运行的一个应用程序,而且每个进程之间是独立的,它们都运行在其专用且受保护的内存空间内,比 ...
- 函数的作用域、作用域链以及return关键字
1.作用域 全局作用域:在函数外部使用var关键字定义的变量 局部作用域:在函数内部使用var关键字定义的变量 特点 (1)局部变量无法直接影响全局变量 (2)在局部作用域中可以使用全局作用 ...
- LUOGU P3382 【模板】三分法 (三分)
传送门 解题思路 三分,填坑.每次取l与r的中间值mid,然后向左移一点点,向右移一点点进行判断,判断时用秦九韶算法即可. #include<iostream> #include<c ...
- mybatis 一对多和一对一写法注意事项
<resultMap id="ChartResultMap" type="com.qif.dsa.ucenter.planinfo.entity.ChartDate ...
- vs nuget 本地安装 nupkg包
Install-Package fluentnhibernate -Source C:\Users\Alex\AppData\Local\NuGet\Cache\ 包名 路径