预览组件

pages/video_show/video_show.js

@@ -29,6 +29,10 @@ Page({
         this.get_config()
 
         const list = wx.getStorageSync('sourcesList') || []
+        // const list = [{
+        //     url: "https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-d95kucn7qqsgFptxhXa6SWi2uePJ5Bg8RFLPIvsEG-4BUDm7F7lfn5E55tXAL34gR30K7Ur1wa7ia1zx17l80NDI5",
+        //     type: "image"
+        // }]
         let videoContexts = []
 
         list.forEach((element, index) => {

pages/video_show/video_show.less

@@ -12,7 +12,7 @@
     background-color: rgba(255, 255, 255, .3);
     position: fixed;
     left: 20rpx;
-    top: 50rpx;
+    top: 86px;
     z-index: 1000;
 
     .icon {
@@ -25,13 +25,18 @@
     width: 100vw;
     height: 100vh;
 
+    .swiper-item {
+        overflow: auto;
+    }
+
     .video {
         width: 100vw;
+        height: 100vh;
     }
 
     .icon {
         width: 100vw;
-        max-height: 80vh;
+        height: 500rpx;
     }
 }
 
@@ -42,4 +47,11 @@
     color: #ffffff;
     position: fixed;
     top: 0;
-}
+}
+
+// .scroll-view {
+//     // flex-direction: column;
+//     display: flex;
+//     justify-content: center;
+//     align-items: center;
+// }

pages/video_show/video_show.wxml

@@ -1,18 +1,20 @@
 <!--pages/video_show/video_show.wxml-->
 <view class="main">
-    <view class="close flexcenter" bindtap="back">
+    <view class="close flexcenter" style="top: {{ screen_data.statusBarHeight + 'px' }};" bindtap="back">
         <image class="icon" mode="widthFix" src="/img/close-f.png"></image>
     </view>
     <view class="header"
         style="padding-top: {{ screen_data.statusBarHeight + 'px' }}; height: {{ screen_data.totalTopHeight }}px;">
         {{ (swiperCurrent * 1 + 1) + " / " + list.length }}</view>
     <swiper class="swiper" current="{{ swiperCurrent }}" bindanimationfinish="bindchangeSwiper" bindtap="back">
-        <swiper-item class="flexcenter" wx:for="{{ list }}" wx:key="index">
+        <swiper-item class="swiper-item flexcenter" wx:for="{{ list }}" wx:key="index">
             <video catchtap="return" id="video{{ index }}" class="video" wx:if="{{ item.type == 'video' }}"
                 src="{{ item.url }}" poster="{{ item.poster }}" autoplay="{{ swiperCurrent == index ? true : false }}"
                 bindplay="onVideoPlay" data-index="{{ index }}"></video>
-            <image wx:else class="icon" mode="widthFix" show-menu-by-longpress src="{{ item.url }}">
-            </image>
+            <block wx:else>
+                <image wx:if="{{ index >= swiperCurrent - 1 && index <= swiperCurrent + 1 }}" class="icon"
+                    mode="widthFix" show-menu-by-longpress src="{{ item.url }}"></image>
+            </block>
         </swiper-item>
     </swiper>
 </view>

pages/video_show/video_show.wxss

@@ -11,7 +11,7 @@
   background-color: rgba(255, 255, 255, 0.3);
   position: fixed;
   left: 20rpx;
-  top: 50rpx;
+  top: 86px;
   z-index: 1000;
 }
 .close .icon {
@@ -22,12 +22,16 @@
   width: 100vw;
   height: 100vh;
 }
+.swiper .swiper-item {
+  overflow: auto;
+}
 .swiper .video {
   width: 100vw;
+  height: 100vh;
 }
 .swiper .icon {
   width: 100vw;
-  max-height: 80vh;
+  height: 500rpx;
 }
 .header {
   width: 100vw;