1.基于上次的优化处理,移动端进行点击翻页,感觉很怪,于是继续进行优化,改为滑动翻页
2.使用 :vue2-touch-events 插件
### main.js 引入并注册
import Vue2TouchEvents from "vue2-touch-events";
Vue.use(Vue2TouchEvents,{
disableClick:true,
swipeTolerance:50,
namespace:"touch"
})
### 模板
<template>
<div class="page">
<MyHeader pageTitle="PDF预览" :backPre="true" :downMenu="false"/>
<div class="content">
<Loading v-if="loading"></Loading>
<!-- pdf组件多页显示(一次性都出来) -->
<!-- <div class="pdf" v-for="i in numPages" :key="i">
<pdf ref="pdf" :src="src" :page="i"></pdf>
</div> -->
<pdf
ref="pdf"
:src="src"
:page="numPages"
@progress="loadedRatio=$event"
@num-pages="pageTotalNum=$event"
@error="pdfError($event)"
@loaded="loadHandler"
@page-loaded="pageLoaded($event)"
v-touch:swipe.left.prevent.stop="swipeLeftHandler_th"
v-touch:swipe.right.prevent.stop="swipeRightHandler_th"
>
</pdf>
<div class="pdfBtn">
<vant-button
round
type="info"
size="small"
@click="prePage"
:class="showBtn ? 'active' : 'notActive'"
:disabled="isDisableLeft"
v-show="showBtnAgainLeft">
上一页
</van-button>
<vant-button
round
type="info"
size="small"
@click="nextPage"
:class="showBtn ? 'active' : 'notActive'"
:disabled="isDisableLeft"
v-show="showBtnAgainLeft">
下一页
</van-button>
</div>
<!-- <div class="control-box">
<button
:class="{select:idx=0}"
@touchstart="idx=0"
@touchend="idx=-1"
@click="scaleD">
放大
</button>
<button
:class="{select:idx==1}"
@touchstart="idx=1"
@touchend="idx=-1"
@click="scaleX">
缩小
</button>
</div> -->
</div>
</div>
</template>
### js代码
<script>
import axios from "axios";
import throttle from "lodash/throttle"; //按需引入节流函数
import vuePdf from "vue-pdf";
const pdf = {...vuePdf,destroyed:undefined}; //解决加载后页面空白问题
// import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js";// 解决中文加载问题
export default{
name:"DownloadServiceManul",
data(){
return{
numPage:1,//当前页码数
url:"",//基础地址
path:"",//pdf动态路径,例: /testFile.pdf
src:"",
scale:100,//放大系数
idx:-1,
loading:true,
loadedRatio:0,// 加载进度
pageTotalNum:1,// 总页数
curPageNum:0,
showBtn:false,
isDisableLeft:true,
isDisableRight:false,
showBtnAgainLeft:false,
showBtnAgainRight:true,
page:1
};
},
props:{
propsData:[Object]
},
components:{
pdf
},
methods:{
//初始化
initPDF(){
const {fileId} = this.propsData;
//this.url="/cpic-health-ecs-eservice/api";
this.url = axios.defaults.baseURL;
this.path = `/downloadServiceManul?fileId=${fileId}&v=${Date.now()}`;
this.src = pdf.createLoadingTask({
url : this.url + this.path,//动态
cMapUrl : "/cmaps/",
cMapPacked : true
});
/* 直接展示全部pdf的使用代码(不是分页的)*/
/* this.src.promise.then(pdf => {
this.numPages = pdf.numPages;
this.loading = false;
})*/
//加载完PDF后对缓存进行清除
for(var key in require.cache){
if(key.indexOf("bcmap") >= 0){
delete require.cache[key];
}
}
},
//PDF渲染完函数
loadHandler(){
this.showBtn = true;
},
//上一页
prePage(){
this.numPages = this.page;
},
//下一页
nextPage(){
this.numPages = this.page;
},
//页面加载完
pageLoaded(e){
this.numPages = e;
this.loading = false;
},
//PDF加载错误
pdfError(error){
console.log(error);
return Promise.reject(error);
},
//左滑事件(节流优化)
swipeLeftHandler_th:throttle(function swipeLeftHandler(){
if(this.pageTotalNum > 1){
//边界轻提示
this.$toast({
message:"当前只有一页!"
duration:0,
overlay:true
});
//轻提示存在时间
let second = 1;
const timer = setInterval(()=>{
second--;
if(!second){
clearInterval(timer);
//手动清除 Toast
this.$toast.clear();
}
},1000);
return false;
}
this.page = this.numPages;
if(this.page == this.pageTotalNum){
//边界轻提示
this.$toast({
message:"已经没有了!"
duration:0,
overlay:true
});
//轻提示存在时间
let second = 1;
const timer = setInterval(()=>{
second--;
if(!second){
clearInterval(timer);
//手动清除 Toast
this.$toast.clear();
}
},1000);
return false;
}
this.page = this.page < this.pageTotalNum ? this.page + 1 : this.pageTotalNum;
},1000,{
trailing:false
}),
//右滑事件(节流优化)
swipeRightHandler_th:throttle(function swipeRightHandler(){
if(this.pageTotalNum <= 1){
//边界轻提示
this.$toast({
message:"当前只有一页!"
duration:0,
overlay:true
});
//轻提示存在时间
let second = 1;
const timer = setInterval(() =>{
second--;
if(!second){
clearInterval(timer);
//手动清除 Toast
this.$toast.clear();
}
},1000);
return false;
}
this.page = this.numPages;
if(this.page <= 1){
//边界轻提示
this.$toast({
message:"这里是首页!"
duration:0,
overlay:true
});
//轻提示存在时间
let second = 1;
const timer = setInterval(()=>{
second--;
if(!second){
clearInterval(timer);
//手动清除 Toast
this.$toast.clear();
}
},1000);
return false;
}
this.page = this.page > 1 ? this.page - 1 : 1;
},1000,{
trailing:false
}),
//放大
/*scaleD(){
this.scale += 5;
const pdfDomList = this.$refs.pdf;
pdfDomList.forEach(pdf => {
pdf.$el.style.width = parseInt(this.scale) + "%";
})
},*/
//缩小
/*scaleX(){
if(this.scale == 100) return;
this.scale += -5;
const pdfDomList = this.$refs.pdf;
pdfDomList.forEach(pdf => {
pdf.$el.style.width = parseInt(this.scale) + "%";
});
}*/
},
watch:{
//监视page变化,滑动时调用绑定在上下页按钮的事件函数
page:{
handler(newVal,oldVal){
if(newVal > oldVal){
this.prePage();
}else if (newVal < oldVal){
this.nextPage();
}
}
}
},
mounted(){
this.initPDF();
}
}
</script>
### 样式代码
<style lang="less" scoped>
.content{
bottom:0;
.pdfBtn{
display: flex;
justify-content: space-around;
margin-top: 1rem;
}
.control-box{
position: fixed;
right: 20px;
bottom: 35px;
}
.active{
display: block;
}
.notActive{
display: none;
}
}
</style>