improvement: bug及优化

src/common/common.wxs

@@ -13,20 +13,10 @@ function computClass (current,index,length,circular) {
 function getClass (status) {
   var cls=['','green','grey','','red','red'];
   var index = status.value || 0;
-  console.log(status)
   return cls[index]
 };
-function showVideo(item,current,index) {
-  if(item.showType && item.showType.value ==2) {
-    if(current === index) {
-      return true
-    } else {
-      return false;
-    }
-  }
-}
+
 module.exports = {
   computClass:computClass,
   getClass:getClass,
-  showVideo:showVideo
 }

src/components/custom/goodsList.wpy

@@ -24,7 +24,10 @@
             data-item="{{item}}"
             class="list-item {{tools.computClass(currentIndex,index,list.length,circular)}}"
           >
-            <image src="{{item.images}}" class="img"></image>
+            <van-image use-loading-slot src="{{item.images}}" class="img" width="220rpx" height="210rpx" radius="10rpx" fit="cover">
+              <van-loading slot="loading" type="spinner" size="20" vertical />
+            </van-image>
+            <!--<image src="{{item.images}}" class="img"></image>-->
             <view class="title">{{item.title}}</view>
             <p class="price">￥{{item.price}}</p>
             <p class="buy">{{item.saleCount}}人购买</p>
@@ -271,7 +274,9 @@
 <config>
   {
     "usingComponents": {
-      "go-loading": "~@/components/custom/goloading"
+      "go-loading": "~@/components/custom/goloading",
+      "van-image": "~@/components/vant/image/index",
+      "van-loading": "~@/components/vant/loading/index",
     }
   }
 </config>

src/components/custom/video.wpy

-<!--<wxs module="video" src="../../common/common.wxs"></wxs>-->
 <template>
   <view class="container">
     <swiper
@@ -18,11 +17,12 @@
             enable-progress-gesture="{{false}}"
             show-center-play-btn="{{false}}"
             controls="{{false}}"
-            src="{{item.videoUrl}}"
+            src="{{currentIndex == index ?item.videoUrl :null}}"
             data-id="{{item.id}}"
             object-fit="contain"
             data-index="{{index}}"
             @tap="videoTap"
+            custom-cache="{{false}}"
             wx:if="{{item.showType && item.showType.value ==2}}"
           >
             <video-pause :pause="videoPause"></video-pause>
@@ -113,6 +113,8 @@
         const _this = this;
         if (this.curQueue.length === 0) {
           //因为列表默认展示1的位置，而后端逻辑会把要展示的放在0的位置，所以交换位置，展示出来
+          //同时展示的元素只有三个，curQueue中始终只有三个元素，用来解决吧video过多时，资源加载问题
+          //当前的资源加载解决方案是参考小程序的video-swiper源码
           newVal.forEach(function (item,index) {
             if(index === 1) {
               _this.curQueue[0] = item;
@@ -126,7 +128,7 @@
           });
           this.playCurrent(1);
         }else{
-          //新进入的数组要去重
+          //新进入的数组要去重，新进入的数组去重是需求的逻辑
           const curIds = this.curQueue.map(item => item.id);
           const nextIds = _this.nextQueue.map(item => item.id);
           const allIds = [...curIds, ...nextIds];
@@ -140,6 +142,7 @@
       moveSwiper(e) {
         this.videoPause = false;
         if (e.$wx.detail.source === 'touch') {
+          //增加一个透明遮罩层，控制用户滑动速度，500ms内只能滑动一次，解决用户滑动过快，不触发animationfinish的bug
           this.showPopup = true;
           setTimeout(()=>{
             this.showPopup = false
@@ -159,8 +162,8 @@
           curQueue = this.curQueue,
           prevQueue = this.prevQueue,
           nextQueue = this.nextQueue;
-        //一共三个数组，curQueue是要显示的数组，其中只有三个元素prevQueue，放上滑过去的元素nextQueue放即将进入的元素
-        //一次最多只展示3个video标签，每次只有当滑动到当前元素时才把视频的url赋值上，这样提高加载视频的速度
+        //一共三个数组，curQueue是要显示的数组，prevQueue放上滑过去的元素，nextQueue放即将进入的元素
+        //一次最多只展示3个video标签，提高加载视频的速度
         const current = e.$wx.detail.current;
         const diff = current - _last;
         if (diff === 0) return;
@@ -220,7 +223,6 @@
             if(index !== current) {
               ctx.pause()
             }else {
-              ctx.seek(0);
               ctx.play();
             }
           }

src/pages/search.wpy

@@ -2,9 +2,9 @@
   <view>
     <view class="search-head">
       <view class="search-wrapper">
-        <van-field clearable left-icon="search" placeholder="搜索" bind:confirm="search"></van-field>
+        <van-field clearable left-icon="search" placeholder="搜索" bind:confirm="search" value="{{value}}" bind:input	="setValue"></van-field>
       </view>
-      <view class="search-cancel" bindtap="backUrl">取消</view>
+      <view class="search-cancel" bindtap="search">搜索</view>
     </view>
     <view class="search-list" v-show="list.length">
       <view class="search-item" wx:for="{{list}}" wx:key="index" bindtap="toJingdong" data-item="{{item}}">
@@ -39,21 +39,21 @@
       isDone:false,
       isLoading:false,
       showLoading:false,
+      value:''
     },
     methods:{
-      backUrl() {
-        wx.navigateBack({delta: 1})
+      setValue(event) {
+        this.value = event.$wx.detail || '';
       },
-      search(event) {
-        const val = event.$wx.detail;
+      search() {
         if(keyword !== '') {
           page = 1;
         }
-        keyword = val;
+        keyword = this.value;
         if(page === 1) {
           this.list = [];
         }
-        this.getList(val);
+        this.getList(this.value);
       },
       getList(val) {
         this.isLoading = true;