vue手势滚动_Vue-router 手势滑动触发返回功能_晴枙_前端开发者
微博的滑动返回基本上就是这样的原理:先滑动、再触发返回事件,但用起来很是怪异,有严重的滞后感。夸克浏览器做的就比较好:一是滑动时界面虽然不动,但是界面上有小图标提示,能让用户接受到反馈;二是返回过程很快,没有多余的过渡动画。
app.
var swidth = document.documentElement.clientWidth;
export default {
name: 'app',
data: () => ({
// direction 页面切换的过渡动画,配合transition组件使用
direction: "slide-left",
// touchLeft 划动起点界限,起点在靠近屏幕左侧时才有效
touchLeft: swidth*2/5,
// touchStartPoint 记录起始点X坐标
touchStartPoint: 0,
// distance 记录划动的距离
distance: 0,
// 回退按钮的dom,根据页面上是否存在此dom来判断该路由是否可回退
backBtn: null
}),
watch: {
// 监听路有变化,决定页面过渡动画
$route(to, from) {
if (from.name == "login" || from.path.indexOf("home") > -1) {
this.direction = "slide-left";
} else if (to.path.indexOf("home") > -1) {
this.direction = "slide-right";
} else {
const toDepth = to.path.split("/").length;
const fromDepth = from.path.split("/").length;
this.direction = toDepth < fromDepth ? "slide-right" : "slide-left";
}
}
},
methods: {
bodyTouchStart: function(event) {
this.backBtn = document.getElementById("navback");
if (this.backBtn) {
// 获得起点X坐标,初始化distance为0
this.touchStartPoint = event.targetTouches[0].pageX;
this.distance = 0;
}
},
bodyTouchMove: function(event) {
if (this.backBtn && this.touchStartPoint < this.touchLeft) {
// 只监听单指划动,多指划动不作响应
if (event.targetTouches.length > 1) {
return;
}
// 实时计算distance
this.distance = event.targetTouches[0].pageX - this.touchStartPoint;
// 根据distance在页面上做出反馈。这里演示通过返回按钮的背景变化作出反馈
if (this.distance > 0 && this.distance < 100) {
this.backBtn.style.backgroundPosition = ((this.distance - 100) / 100) * 50 + "px 0";
} else if (this.distance >= 100) {
this.backBtn.style.backgroundPosition = "0 0";
} else {
this.backBtn.style.backgroundPosition = "-50px 0";
}
}
},
bodyTouchEnd: function(event) {
if (this.backBtn && this.touchStartPoint < this.touchLeft) {
// 划动结束,重置数据
this.touchStartPoint = 0;
this.backBtn.style.backgroundPosition = "-50px 0";
// 当划动距离超过100px时,触发返回事件
if (this.distance > 100) {
// 返回前修改样式,让过渡动画看起来更快
document.getElementById("app").classList.add("quickback");
this.$router.back();
setTimeout(function(){
document.getElementById("app").classList.remove("quickback");
},250)
}
}
}
}
}
#app {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 100%;
overflow-x: hidden;
}
.appView {
position: absolute;
width: 100%;
background: #fff;
min-height: 100vh;
transition: transform 0.24s ease-out;
}
#app.quickback .appView{
transition-duration: 0.1s;
}
.slide-left-enter {
transform: translate(100%, 0);
}
.slide-left-leave-active {
transform: translate(-50%, 0);
}
.slide-right-enter {
transform: translate(-50%, 0);
}
.slide-right-leave-active {
transform: translate(100%, 0);
}
下面看下
引入vue-awesome-swiperimport 'swiper/dist/
import { swiper, swiperSlide } from 'vue-awesome-swiper';components: {
swiper,
swiperSlide,
},data() {
return {
swiperOption: {
width: window.innerWidth,
zoom : true,
initialSlide: 0,
},
};
},
代码案例见 https://github.com/yource/VueSPA
总结
以上所述是小编给大家介绍的vue-router 手势滑动触发返回功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对前端开发者网站的支持!
vue手势滚动_Vue-router 手势滑动触发返回功能_晴枙_前端开发者相关推荐
- vue手势滚动_vue-router 手势滑动触发返回功能
vue-router的路由变换只存在"变换前"和"变换后",不存在"切换中"的状态,所以做不到大多数app(微信那样的)在滑动过程中让界面跟 ...
- vue怎么vw布局好用_Vue 实现 rem 布局或vw 布局的方法_晴枙_前端开发者
一.实现 rem 布局 移动端 name="viewport" content="width=device-width, initial-scale=1, maximum ...
- vue-router 手势滑动触发返回
vue-router的路由变换只存在"变换前"和"变换后",不存在"切换中"的状态,所以做不到大多数app(微信那样的)在滑动过程中让界面跟 ...
- vue手势滚动_vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
https://github.com/383514580/any-touch 先看demo demo 说点湿的 iscroll其实代码量挺大的(近2100行, 还有另一个类似的库betterScrol ...
- Vue组件滚动加载、懒加载功能的实现,无限滚动加载组件实例演示
效果图如下: 可以看到随着不断的滚动,页面组件的数量不断的加载. 其实加载的是后端返回的数据,因为涉及隐私,没有给显示出来. 利用懒加载,可以防止大量渲染造成卡顿降低用户体验. 页面的动态加载这块可以 ...
- vue 后台翻译_vue translate peoject实现在线翻译功能【新手必看】
开始 这是一适合新手练习的小项目,一个在线翻译的demo. 在正式开始前,先啰嗦一下,是一位网友给我的建议,就是不要强行组件化的问题 开始做Vue时我们可能会喜欢拆很多组件出来 但记住组件是为了复用( ...
- iOS 7的手势滑动返回功能
之前随手写过一篇<使用UIScreenEdgePanGestureRecognizer实现swipe to pop效果>,挺粗糙的. 现在使用默认模板创建的iOS App都支持手势返回功能 ...
- 禁用ios7 手势滑动返回功能
禁用ios7 手势滑动返回功能 版权声明:本文为博主原创文章,未经博主允许不得转载. [objc] view plaincopy print? 在有的时候,我们不需要手势返回功能,那么可以在页面中 ...
- rn react native PanResponder手势动画 实现窗口拖动 滑动动画 Animated
个人笔记:(很多地方比较累赘,求指正) 需求:项目需要在RN窗口 实现对其拖动和滑动动画,点击滑动: 思路:通过PanResponder监听手势操作.配合Animated实现 不需要第三方包,比较简单 ...
最新文章
- MySql 查询表字段数
- PL/SQL Virtual Machine Memory Usage
- [Vuex系列] - Vuex中的getter的用法
- 美团点评SQL优化工具SQLAdvisor开源
- 详细解读java IO
- JavaFX快速入门完整代码:点击按钮显示当前系统时间示例
- 【JVM调优工具篇】使用MAT工具分析dump文件(查看GC Roots)
- 如何使用Soft-NMS实现目标检测并提升准确率
- python和office_Python在office开发中的应用
- c语言二叉树图形输出,C语言数据结构树状输出二叉树,谁能给详细的解释一下...
- 安装ubuntu18.04虚拟机太慢
- html编辑器拖拽表格边框,Ueditor百度编辑器表格边框显示问题
- SQL server 2008 r2 安装教程
- 易语言取MySQL错误代码,易语言中“取错误码”命令详解
- 自制的一个小地图生成器
- mysql 中一个表里有父子关系_SQLAlchemy - 同一个表中的父子关系
- Lonlife-ACM Round #7
- 2WD远程控制小车——云端设计
- 控制台模拟鼠标、键盘操作
- 山东大学项目实训十六——可控音乐变压器Controllable Music Transformer
热门文章
- 3dsmax安装后 应用程序无法正常启动(0xc0000022)。请单击确定 关闭。的解决办法
- Arduino控制PWM舵机的总结
- 外设驱动库开发笔记44:DDC114 ADC驱动
- abstract 类和 abstract 方法 (抽象类与抽象方法)
- java 静态代码块的作用_Java中什么是静态代码块,有什么作用?
- Josephus约瑟环问题
- mkdir实现c++
- 惠普暗夜精灵3plus配置ubuntu18.0.4、cuda9.0、cudnn7.0、anaconda(python2.7)、tensorflow-gpu1.8、keras、opencv等
- B. Kind Anton_牛哄哄的柯南
- 【PS】利用滤镜制作巧克力效果