1.使用原因:
原本使用了组件自带的图片预览功能,但是在部分手机型号中:预览图片时,(在移动端的webview下面)左右滑动切换图片,会触发应用的“返回上一页”功能。
2.解决办法:
使用钉钉提供的图片预览Api。
3.代码展示:
1.引入
import * as dd from "dingtalk-jsapi";
import { ImagePreview } from "vant";
import Vue from "vue";
Vue.use(ImagePreview);
2.方法
picturePreview(images,index=0) {
if (dd.env.platform === "ios" || dd.env.platform === "android") {
dd.biz.util.previewImage({
urls: images,图片地址列表
current: images[index],当前显示的图片链接
onSuccess: function (res) {
// 调用成功时回调
console.log(res)
},
onFail: function (err) {
// 调用失败时回调
console.log(err)
}
});
} else {
ImagePreview({
images,//需要预览的图片 URL 数组
closeable: true,//是否显示关闭图标
startPosition:index//图片预览起始位置索引
});
}
}
3.调用
--html
<div v-for="(item,index) in imgList" :key="index">
<img :src="'url" @click="picturePreviewCurrentPage(imgList,index)"/>
</div>
--js
picturePreviewCurrentPage(item, index) {
let imgList = item.map((item) => {
const url = `${window.location.protocol}//${window.location.host}/${item.url}`;
return url;
});
this.picturePreview(imgList,index);
}