增加图片懒加载功能和移动端只有音频的时候只显示音频按钮

package-lock.json

@@ -14,6 +14,7 @@
         "v-viewer": "^1.5.1",
         "vue": "^2.6.11",
         "vue-awesome-swiper": "^4.1.1",
+        "vue-lazyload": "^1.3.3",
         "vue-router": "^3.2.0"
       },
       "devDependencies": {
@@ -13318,6 +13319,11 @@
       "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
       "dev": true
     },
+    "node_modules/vue-lazyload": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.4.tgz",
+      "integrity": "sha512-K0frbPQJuvFHVpdl/ov5CqCR/CHWeLGs8E8V1d/09DIETqBjeGhC1fLMmwUy3Go2Yd/VX610AZ7Mdn4B54592Q=="
+    },
     "node_modules/vue-loader": {
       "version": "15.9.3",
       "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.3.tgz?cache=0&sync_timestamp=1600850354305&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-15.9.3.tgz",
@@ -25558,6 +25564,11 @@
       "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
       "dev": true
     },
+    "vue-lazyload": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.4.tgz",
+      "integrity": "sha512-K0frbPQJuvFHVpdl/ov5CqCR/CHWeLGs8E8V1d/09DIETqBjeGhC1fLMmwUy3Go2Yd/VX610AZ7Mdn4B54592Q=="
+    },
     "vue-loader": {
       "version": "15.9.3",
       "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.3.tgz?cache=0&sync_timestamp=1600850354305&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-15.9.3.tgz",

package.json

@@ -14,6 +14,7 @@
     "v-viewer": "^1.5.1",
     "vue": "^2.6.11",
     "vue-awesome-swiper": "^4.1.1",
+    "vue-lazyload": "^1.3.3",
     "vue-router": "^3.2.0"
   },
   "devDependencies": {

src/assets/base.css

@@ -1,6 +1,15 @@
+.viewer-title{
+  display: none !important;
+}
 .viewer-prev{
   display: none !important;
 }
 .viewer-next{
   display: none !important;
 }
+.viewer-navbar{
+  display: none !important;
+}
+.viewer-close{
+  display: none !important;
+}

src/main.js

@@ -4,15 +4,17 @@ import router from './router'
 import axios from 'axios'
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
- 
+// 图片懒加载
+import VueLazyLoad from 'vue-lazyload'
+Vue.use(VueLazyLoad, {
+  error: require('@/assets/images/IMGerror.png'),
+  loading: require('@/assets/images/loading.gif')
+})
+
 Vue.config.productionTip = false
 Vue.prototype.$http = axios
 
-Vue.use(Viewer,{
-  defaultOptions: {
-    title:false
-  }
-})
+Vue.use(Viewer)
 
 import './assets/base.css'
 new Vue({

src/views/Home.vue

@@ -28,6 +28,11 @@
           v-if="data.imagesDesc && data.imagesDesc[myInd]"
         ></p>
       </div>
+      <!-- 查看图片 -->
+      <viewer class="viewerCla" ref="viewer" :images="lookPics">
+        <img :src="lookPics[0]" alt="" />
+      </viewer>
+
       <swiper
         v-show="active !== 'title'"
         class="warpper"
@@ -38,9 +43,9 @@
           <div class="slide">
             <img
               style="cursor: pointer"
-              v-viewer
               v-if="active === 'images'"
-              :src="fixUrl(item)"
+              v-lazy="fixUrl(item)"
+              @click="lookImg(fixUrl(item))"
               alt=""
             />
             <video
@@ -75,7 +80,10 @@
       :class="{ oneChuMusic: fixIcon.length === 1 && !audio }"
     >
       <li
-        :class="{ active: item.id === active || item.audioAc }"
+        :class="{
+          active: item.id === active || item.audioAc,
+          onlyTxt: audio && fixIcon.length === 2 && i !== 0,
+        }"
         @click="changeActive(item.id, item.audioAc)"
         v-for="(item, i) in fixIcon"
         :key="i"
@@ -128,11 +136,12 @@ export default {
   name: "Home",
   data() {
     return {
+      lookPics: [],
+
       // 图片描述的索引
       myInd: 0,
       lengthShow: false,
       //  看看是不是只有一张图，一个视频或irm，只有一张图的时候隐藏左右按钮和小圆点
-      // loadAuto: false,
       audio: "",
       m: this.$route.query.m,
       id: this.$route.query.id,
@@ -213,6 +222,12 @@ export default {
     SwiperSlide,
   },
   methods: {
+    // 点击查看大图
+    lookImg(url) {
+      let dom = this.$refs.viewer.$viewer;
+      this.lookPics = [url];
+      dom.show();
+    },
     // 音频播放完毕
     overAudio() {
       console.log("播放声音完毕");
@@ -237,17 +252,6 @@ export default {
       }
       this.active = id;
     },
-    // autoplay() {
-    //   if (this.loadAuto) {
-    //     return;
-    //   }
-    //   try {
-    //     this.$refs.musicBg.play();
-    //     this.loadAuto = true;
-    //   } catch (error) {
-    //     error;
-    //   }
-    // },
     async getData() {
       // https://www.4dmodel.com/
       let url = `https://super.4dage.com/data/${
@@ -318,6 +322,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.viewerCla img {
+  display: none;
+}
 .audio {
   position: fixed;
   top: -100px;
@@ -404,6 +411,9 @@ export default {
     opacity: 0;
     pointer-events: none;
   }
+  .onlyTxt {
+    display: none !important;
+  }
   .intro {
     max-height: 19vh;
     overflow: auto;