vue--图片预览器（vant）+ 安卓返回键处理

一、
vant的图片预览
运用详解：
在组件里引用

import { ImagePreview } from 'vant';

<div class="img_box" v-for='(item2,index) of item.images' :key='index'><img :src="item2" alt="" @click="getImg(item.images,index)">
</div>
//图片预览，通过传参的方式把图片数组放入ImagePreview配置对象里
methods:{getImg(images,index){ImagePreview({images:images,showIndex:true,loop:false,startPosition:index})},

二、
vant 预览图片的组件没有详细告诉我们碰到安卓键返回的时候该怎么处理，正常情况：预览图缩小，还在该页面；实际情况：预览图缩小，页面回退
处理：
1.

getImg(images,index){ImagePreview({images:images,showIndex:true,loop:false,startPosition:index,closeOnPopstate:true//首先加上这个属性：是否在页面回退时自动关闭，设置为true})}

2.在beforeRouteLeave路由离开之前，判断预览是否是隐藏的，是让他执行路由跳转，否让不跳转（不过这种方法适用于非首页）

beforeRouteLeave (to, from, next) {if(($('.van-image-preview').css('display')=='none' && $('.van-image-preview__overlay').css('display')=='none') || ($('.van-image-preview').css('display')==undefined && $('.van-image-preview__overlay').css('display')==undefined)){next(true);this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;}else{next(false);}},

首页处理，相当于监听安卓返回键（或者浏览器后退键）
HTML5 新API
官方网址
history.pushState(state, title, url); 添加一条历史记录（页面不会刷新）
history.replaceState(state, title, url); 替换一条历史记录（页面不会刷新）
事件
popState事件：当历史记录（history对象）发生变化时就会触发，通过 window.addEventListener(‘popstate’) 进行注册。会触发场景：
1.点击浏览器的【前进】【后退】按钮
2.调用 history 对象的 back、forward、go 方法
3.a 标签的锚点
PS：调用 replaceState、pushState 方法不触发popState事件，不会导致浏览器真正的跳转，浏览器甚至不会检测 url 的有效性

methods:{toBack(){//做返回判断           }
},
mounted() {if (window.history && window.history.pushState) {history.pushState(null, null, document.URL);window.addEventListener('popstate', this.toBack, false);//false阻止默认事件}},destroyed:function(){window.removeEventListener('popstate', this.toBack, false);//false阻止默认事件}

vue--图片预览器（vant）+ 安卓返回键处理相关推荐

基于 vue 编写的vue图片预览组件，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果，可自定义背景、按钮颜色等
hevue-img-preview 简介完整版下载地址:基于 vue 编写的vue图片预览组件本组件是一个基于 vue 编写的 vue 图片预览组件,支持 pc 和手机端,支持单图和多图预览,仅传 ...
pc 图片预览放大端vue_安利一款简单好用的Vue图片预览插件
在项目中因为要经常用到图片预览效果,自己写的话麻烦死啦(懒) vue-photo-preview 一个基于 photoswipe 的 vue 图片预览插件,支持移动端和PC端,支持各种手势操作,放大缩 ...
VUE图片预览放大缩小插件viewer
VUE图片预览放大缩小插件viewer 一.安装依赖 npm install v-viewer --save 二.main.js内引用并注册调用 //main.js import Viewer fro ...
Android 图片预览器加载微博长图，大图
通常图片预览的做法是ViewPager+PhotoView,但是遇到很长的图(比如微博长图),在设置 android:scaleType="centerCrop" 这个属性的前提下 ...
基于photoswipe实现的vue图片预览组件vue-image-swipe
安装 npm install vue-image-swipe -S 在main.js中引用 import Vue from 'vue' import VueImageSwipe from 'vue-i ...
vue图片预览插件，支持鼠标缩放：useful-photo-preview
文章目录前言介绍如何使用安装使用功能预览 API 前言我现在在做的vue项目使用的组件库是Ant Design的vue版本,里面有个图片组件,但是用起来不顺心.在bing找了一些,要么 ...
写一个图片预览器（react-native）,温习一下初中数学
statistics source download download/month npmjs.com npm.taobao.org cnpmjs.org 需求很简单: 可以放大任意一处我想放大的地方 ...
实现一个vue的图片预览插件
vue-image-swipe 基于photoswipe实现的vue图片预览组件安装 1 第一步 npm install vue-image-swipe -D 2 第二步 vue 入口文件引入 im ...
vue 封装图片预览组件
因项目需要,自己封装了个vue图片预览组件 <template><div class="imgs_previews animated" @mousewheel.p ...

vue--图片预览器（vant）+ 安卓返回键处理

vue--图片预览器（vant）+ 安卓返回键处理相关推荐

最新文章

热门文章