vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)


Posted in Javascript onApril 22, 2017

先给大家展示下效果图,感觉还不错请参考实现代码:

vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)

使用技术:vue2.0 webpack vue-touch 一些简单的javascript;

(注意:vue-touch 使用的是2.0.0版本 需要与vue2.0.0兼容)

vue-touch(地址:https://github.com/vuejs/vue-touch 注意是next 分支)

左侧导航可滑动(右侧视图窗因为和左逻辑一样 就没写)

var VueTouch = require('vue-touch')
Lib.Vue.use(VueTouch, {name: 'v-touch'})

通过npm 安装后vuetouch 后引入

我这里Lib,是我的一个方法 你也可以 直接Vue.use()引用

{name:'v-touch'}的作用 声明一个以vue-touch的标签

然后 在html内写一个 <vue-touch></vue-touch>就可以,当然后面我们要写入方法;

附:vue-touch方法

因为vue-touch其实封装了 hammer.js的方法 其实我们这里介绍的也就是他几个事件;详情可以搜索 hammer.js的文档;

hammer.js主要针对触屏的6大事件进行监听。如下图所示:

1、  Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件。这个事件在屏触开发中比较常用,如:左拖动、右拖动等,如手要上使用QQ时向右滑动出现功能菜单的效果。该事件还可以分别对以下事件进行监听并处理:

Panstart:拖动开始、Panmove:拖动过程、Panend:拖动结束、Pancancel:拖动取消、Panleft:向左拖动、Panright:向右拖动、Panup:向上拖动、Pandown:向下拖动

2、  Pinch事件:在指定的dom区域内,两个手指(默认为两个手指,多指触控需要单独设置)或多个手指相对(越来越近)移动或相向(越来越远)移动时事件。该事件事以分别对以下事件进行监听并处理:

Pinchstart:多点触控开始、Pinchmove:多点触控过程、Pinchend:多点触控结束、Pinchcancel:多点触控取消、Pinchin:多点触控时两手指距离越来越近、Pinchout:多点触控时两手指距离越来越远

3、  Press事件:在指定的dom区域内触屏版本的点击事件,这个事件相当于PC端的Click事件,该不能包含任何的移动,最小按压时间为500毫秒,常用于我们在手机上用的“复制、粘贴”等功能。该事件分别对以下事件进行监听并处理:

Pressup:点击事件离开时触发

4、  Rotate事件:在指定的dom区域内,当两个手指或更多手指成圆型旋转时触发(就像两个手指拧螺丝一样)。该事件分别对以下事件进行监听并处理:

Rotatestart:旋转开始、Rotatemove:旋转过程、Rotateend:旋转结束、Rotatecancel:旋转取消

5、  Swipe事件:在指定的dom区域内,一个手指快速的在触屏上滑动。即我们平时用到最多的滑动事件。

Swipeleft:向左滑动、Swiperight:向右滑动、Swipeup:向上滑动、Swipedown:向下滑动

6、Tap事件:在指定的dom区域内,一个手指轻拍或点击时触发该事件(类似PC端的click)。该事件最大点击时间为250毫秒,如果超过250毫秒则按Press事件进行处理。

(以上作者毫无节奏的摘抄一下,其实我也是费好大劲搜索的呀)
这里注意swipe这个方法;我们不需要因为这个滑动和我们需要的滑动是不一样的;

Panstart 是我们需要的;

展示一下 div 代码层;

vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)

<v-touch class="ul" 
 v-on:pandown="onPanStart" //向下滑动
 v-on:panmove="onPanmove" //滑动结束
 v-on:panup="onPandup"> //向上滑动
</v-touch>

注意:也可以进行 事件的限制 用户多长时间可以执行

//我没用到这句
 v-bind:pan-options="{ direction: 'panup', threshold: 100 }">

首先定一个 公共变量

//省去一些 代码
var lefthe = 0; //检测滑动的位置
onPanStart:function(data)
 {
 this.positionjson.transition=''
 console.log(data)
 var y = data.deltaY; //事件执行 所滑动的距离
 lefthe = y + this.lefthe; //滑动的距离 记录到 lefthe 方便下次执行
 console.log(lefthe)
 if(lefthe >=50)
 {
 //限制 不能一直往上拉 拉到宇宙呢?我这里是写死的
  lefthe = 0;
 //回弹效果 在 滑动结束后 执行
 return
 }else{
 }
 this.positionjson.top = lefthe +'px';
 },

滑动结束 事件

onPanend:function(data)
 {
 if(lefthe ==0)
 {
 console.log('现在是0')
 this.positionjson.top = lefthe +'px';
 //滑动结束 执行 一些事件 lefthe 0 的时候其实也就是下拉到顶的过程
 this.positionjson.transition='0.2s ease 0s'
 }else{
 }
 this.lefthe = lefthe;
 },
//上拉代码块
onPandup:function(data)
 {
 var domul =document.getElementById('domul');
 this.positionjson.transition=''
 var y = data.deltaY; //下拉的距离
 var boxheight = this.boxheight; //视图高度 也就是分辨率
 var liheight = document.getElementById('libox').clientHeight; //左侧每个li的高度
 console.log(liheight+'元素的高')
 var zongheight = this.navapi.list.length * 70; //就能得出li父盒子高度
 var bottomheight = -(zongheight - boxheight) + -100; //计算下拉到 滑动盒子的高度 - 视图高度 =上拉到底的位置
 if(lefthe <= bottomheight)
 {
 // console.log('到底啦啦啦啦啦')
 return;
 }else{}
 lefthe = y + this.lefthe;
 this.positionjson.top = lefthe +'px';
 },

以上所述是小编给大家介绍的vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
深入理解node.js http模块
Jan 24 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 Javascript
微信小程序版本自动更新的方法
Jun 14 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
vue页面跳转实现页面缓存操作
Jul 22 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 #Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 #Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 #Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 #Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 #jQuery
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 #Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 #Javascript
You might like
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
php+mysql开发中的经验与常识小结
2019/03/25 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
Python Deque 模块使用详解
2014/07/04 Python
浅析Python多线程下的变量问题
2015/04/28 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
python3个性签名设计实现代码
2018/06/19 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
5s推行计划书
2014/05/06 职场文书
企业党员一句话承诺
2014/05/30 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
店长岗位职责
2015/02/11 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书