Uniapp轮播pdf

vue页面：

<template>
    <view class="uni-flex uni-column">
        <view >
            <uni-row  :gutter="gutter" style="height:100px;">
                <!-- <uni-col :xs="5" :sm="5" :md="3" :lg="2" :xl="1">
                    <button class="mini-btn" type="primary" size="mini" @click="showDrawer('showLeft')">SOP列表</button>
                </uni-col> -->
                <!-- <uni-col :xs="5" :sm="5" :md="3" :lg="2" :xl="1">
                    <button class="mini-btn" type="primary" size="mini">更新SOP</button>
                </uni-col> -->
                
                <uni-col :span="1">
                    <view style="font-size: 16px;cursor: pointer;"><uni-icons type="undo" size="20" @click="goBack"></uni-icons></view>
                </uni-col>
                <uni-col :span="7" :offset="16">
                    <view style="font-size: 16px;">自动播放<switch style="transform:scale(0.8)"  v-model="autoplay" @change="changeAutoplay" /></view>
                </uni-col>
                
            </uni-row>
        </view>
        <view class="webview-container">
                    <!-- <my-pdfview :sopFileDetailId="curSopFileDetailId" ></my-pdfview> -->
                <web-view ref="webView"  :class="webViewClass"  :src="pdfurl" @load="pdfOnLoad" @error="pdfOnError"   :webview-styles="webviewStyles" :update-title="false"></web-view>
                
        </view>
        <view class="drawerView">
            <uni-drawer ref="showLeft" mode="left" :width="350" @change="change($event,'showLeft')" :style="{ zIndex: zIndex }" >
                <view class="scroll-view">
                    <scroll-view class="scroll-view-box" scroll-y="true" scroll-x="true">
                        <view class="close">
                            <button @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭Drawer</text></button>
                        </view>
                        <uni-card title="我的SOP" extra="SOP明细表" >
                            <view class="uni-table-container" >
                                <uni-table ref="table" :loading="tblloading" border  type="selection"   emptyText="暂无更多数据" 
                                @selection-change="tblSelectionChange" >
                                    <uni-tr>
                                        <uni-th width="50" align="center">序号</uni-th>
                                        <uni-th width="150" align="center">SOP编码</uni-th>
                                        <uni-th align="center">SOP名称</uni-th>
                                        <uni-th width="70" align="center">版本</uni-th>
                                        <!-- <uni-th width="204" align="center">设置</uni-th> -->
                                    </uni-tr>
                                    <uni-tr v-for="(item, index) in tableData" :key="index" :class="{ 'selected-row': selectedRows.includes(index) }">
                                        <uni-td>{ { index+1 }}</uni-td>
                                        <uni-td>
                                            <view >{ { item.code }}</view>
                                        </uni-td>
                                        <uni-td align="center">{ { item.name }}</uni-td>
                                        <uni-td align="center">{ { item.esopVersion }}</uni-td>
                                        <uni-td align="center">{ { item.releaseDate }}</uni-td>
                                        <!-- <uni-td>