vue手势左右滑动_vue + any-touch实现一个iscroll ? - (1) 实现拖拽和滑动动画

最新推荐文章于 2022-06-08 17:19:24 发布
VIP文章 最新推荐文章于 2022-06-08 17:19:24 发布
阅读量264 收藏
点赞数
文章标签： vue手势左右滑动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42309773/article/details/113450456
版权

7c132414de8c05f5ccd97e915b815c7c.png

vue + any-touch实现一个iscroll ? - (1) 实现拖拽和滑动动画

ad28d7cd21d9b748b242c761f10566d8.png

any-touch

先看demo

demo

本次文章先实现内容拖拽, 后续文章一步一步增加功能, 比如滚动条/ 下拉加载等功能.

c61f408c52ec932100ea9b577ba5d38d.gif

说点湿的

iscroll其实代码量挺大的(近2100行, 还有另一个类似的库betterScroll他的代码量和iscroll差不多, 因为原理都是一样的), 阅读他们的代码 发现里面很多逻辑其实都是在做手势判断, 比如拖拽(pan), 和划(swipe), 还有部分元素(表单元素等)需要单独判断点击(tap), 这部分代码接近1/3, 所以我决定用自己开发的手势库(any-touch)实现一个iscroll, 同时配合文字

最低0.47元/天 解锁文章
轻雪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue.js移动端touch事件左右滑动与uc浏览器冲突的解决办法，并解决滑动页面有垂直滚动条时无法滚动的问题
believet93的博客
08-27 1946
主要在touchmove事件中阻止事件的默认行为，if(disX > disY) {e.preventDefault()}事件是关键。另外，如果子元素中不存在滚动条的话，是可以直接在touch事件后加 .prevent 的，而不用在touch事件处理方法中去阻止默认事件。 <div @touchstart="start($event,key)" @touchmove="move($event,key)" @touchend="end($event,key)" ref="tab
vue手势滚动_vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
weixin_32207065的博客
01-14 371
https://github.com/383514580/any-touch先看demodemo说点湿的iscroll其实代码量挺大的(近2100行, 还有另一个类似的库betterScroll他的代码量和iscroll差不多, 因为原理都是一样的), 阅读他们的代码发现里面很多逻辑 其实都是在做手势判断 , 比如拖拽(pan), 和划(swipe), 还有部分元素(表单元素等)需要单独判断点击(...
vue + any-touch实现一个iscroll ? - (1) 实现拖拽和滑动动画
n6308的博客
04-07 297
any-touch 先看demo jsrun codepen 本次文章先实现内容拖拽和滑动动画, 后续文章一步一步增加功能, 比如滚动条/ 下拉加载等功能. 说点湿的 iscroll其实代码量挺大的(近2100行, 还有另一个类似的库betterScroll他的代码量和iscroll差不多, 因为原理都是一样的), 阅读他们的代码 发现里面很多逻辑其实都是在做手势判断, 比如拖拽(pan), ...
h5滚动时侧滑出现_H5触摸事件中如何判断用户滑动方向
weixin_39973196的博客
12-20 148
这次给大家带来H5触摸事件中如何判断用户滑动方向，H5触摸事件中判断用户滑动方向的注意事项有哪些，下面就是实战案例，一起来看一下。接口TouchEventTouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。每 个 Touch 对象代表一个触点; 每个触点都由其位置，大小，形状，压力大...
解决vue3.0中语法检出出现any等问题
qq_16495187的博客
06-30 3193
1.解决在setup中使用props时出现如下图 出现上面问题可以找到tsconfig.json文件里面的 “strict”: true, 这个代码改成false “strict”: false 这个问题就可以解决… 2.解决出现any语法等问题,找到tsconfig.json文件里面的 "noImplicitAny"参数,如果没有就自己创建, 然后设置 “noImplicitAny”: false 就可以解决出现any等的一些问题 ...
Vue-touch的使用
一念执着。c的博客
05-22 2万+
有时候我们不止需要有返回键，也要有手势滑动切换页面的功能时，这个时候vue-touch就派上用场了 安装 npm insall vue-touch@next --save //main.js中引入： import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch'}) 用法如下： //html代码 &amp;lt;tem...
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
10-17
主要介绍了vue + any-touch实现一个iscroll实现拖拽和滑动动画效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新（包含源码）
04-01
Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新（包含源码）
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目
06-15
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目。本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。前端包含了...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
移动端滚动条的问题
m0_49662897的博客
06-03 1342
滚动条
vue左右拖动上下滚动组件
02-15
这是一个vue,pc端上的局部上下滚动，左右拖动单元格元素组件
vue-router 手势滑动触发返回功能
10-17
主要介绍了vue-router 手势滑动触发返回功能，文中通过实例代码给大家介绍了vue图片左右滑动及手势缩放,需要的朋友可以参考下
vue draggable resizable 实现可拖拽缩放的组件功能
12-09
虽然之前适配过旧版组件，但是因为2.0版本原作者对代码进行了重构，原来修改的代码照搬是不可能的了。 所以也就一直没有将 冲突检测 以及 吸附对齐 功能适配到2.0版本，最近正好有时间就适配一下。 新增特征 冲突检测 吸附对齐 默认样式优化 功能预览 项目地址 github.com/gorkys/vue-… 如果喜欢该项目，欢迎 Star 新增Props isConflictCheck Type: Boolean Required: false Default: false 定义组件是否开启冲突检测。 <vue-draggable-resizable :is-conflict-c
vue H5中使用kim-vue-touch监听上滑，点击下滑事件
liuxi_happy的博客
06-08 1704
移动端监听上滑下滑
vue手势滚动_vue + any-touch实现一个iscroll ? - (1) 实现拖拽和滑动动画
weixin_39736047的博客
01-14 130
vue + any-touch实现一个iscroll ? - (1) 实现拖拽和滑动动画先看demo本次文章先实现内容拖拽, 后续文章一步一步增加功能, 比如滚动条/ 下拉加载等功能.说点湿的iscroll其实代码量挺大的(近2100行, 还有另一个类似的库betterScroll他的代码量和iscroll差不多, 因为原理都是一样的), 阅读他们的代码 发现里面很多逻辑其实都是在做手势判断, 比...
vue2.0移动端滑动事件vue-touch
热门推荐
你蠢哭我咯的博客
12-08 5万+
https://github.com/vuejs/vue-touch/tree/next cnpm install vue-touch@nextvar VueTouch = require('vue-touch') Vue.use(VueTouch, {name: 'v-touch'})//左划 默认渲染为div data为参数 <v-touch v-on:swipeleft="onS
不到30行, 用any-touch实现一个drawer
n6308的博客
03-27 226
any-touch 一个手势库 demo 预览1 如果预览1打不开, 点我 drawer的基本逻辑 添加2个div, 一个是当drawer隐藏的时候打开隐藏的触发开关, 一个是drawer本身. 对把手和drawer进行进行fixed定位到界面的右侧边缘. 调整drawer和把手的样式, 这里把手主要是要设置背景色为透明, 具体样式看下面代码. 用any-touch分别给把手和drawer添...
vue实现 移动端touch--点击、双指与拖拽指令
weixin_34360651的博客
12-12 3709
前言 用vue做移动端开发过程中，需要手势操作。因为vue-touch目前不支持vue2.0，所以自己写了几个手势。 实现功能 点击 双指缩放图片 移动 指令代码 myTouch.js >> export default(Vue) => { Vue.directive('touch', { b...
vite+vue3+js+vue-router+pinia+axios+element-plus
最新发布
09-02
Vite是一个用于快速构建现代化的Web项目的构建工具，它专注于开发阶段的快速热重载，并使用ES模块作为原生的开发模式。Vue3是Vue.js的最新版本，它在性能、开发体验和可维护性上都有所提升。 针对你提到的具体的库和框架： - Vue Router是Vue.js官方的路由管理器，用于实现页面之间的导航和路由控制。你可以通过npm安装vue-router，并在项目中进行配置和使用。 - Pinia是Vue.js的状态管理库，它提供了一种简单而强大的方式来管理应用程序的状态。你可以集成Pinia到你的Vue项目中，以便更好地组织和共享你的应用程序状态。 - Axios是一个基于Promise的HTTP客户端，用于通过网络发送异步请求。你可以使用Axios来处理与服务器的通信，并获取数据来更新你的Vue应用程序。 - Element Plus是一套基于Vue3的组件库，包含了丰富的UI组件，可以帮助你快速搭建漂亮的用户界面。你可以在项目中安装和使用Element Plus来实现各种交互效果和用户界面。 如果你想使用Vite、Vue3和以上提到的库和框架来创建一个项目，你可以按照以下步骤进行： 1. 安装Vite：通过npm全局安装Vite，然后使用Vite命令初始化一个新的项目。 2. 配置Vite：根据你的项目需求，在Vite的配置文件中添加Vue Router、Pinia、Axios和Element Plus的相关配置。 3. 安装和配置Vue Router：通过npm安装Vue Router，并在项目中配置和使用Vue Router来管理应用程序的路由。 4. 集成Pinia：通过npm安装Pinia，并在项目中引入和配置Pinia，以便在应用程序中使用Pinia来管理状态。 5. 使用Axios：通过npm安装Axios，并在项目中引入和配置Axios，以便进行网络请求和数据获取。 6. 引入Element Plus：通过npm安装Element Plus，并在项目中按需引入和使用Element Plus的组件，以搭建漂亮的用户界面。 希望以上信息对你有帮助，祝你在使用Vite、Vue3和这些库和框架时取得成功！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vite-vue-ts精简模版集成pinia+svg+router+@src](https://download.csdn.net/download/ldy889/85018930)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vite+vue3+ts+vue-router+pinia+axios+element-plus](https://blog.csdn.net/zy_080400/article/details/127125359)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值