玩法介绍当前位置:天悦娱乐 > 玩法介绍 > >

天悦娱乐注册:vue 和vue-touch 实现移动端左右导航

  

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

  

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

  

  

  

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

  

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

  

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其实封装了 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区域内,当两个手指或更多手指成圆型旋转时触发(就像两个手指拧螺丝一样)。该事件分别对以下事件进行监听并处理:   (责任编辑:admin)

上一篇:javascript实现的网页标题变换效果(网页游戏广告常

下一篇:没有了

推荐内容

分享网站

客户服务热线

010-400-12345

在线客服