improvement: 商品无限循环

src/pages/index.wpy

@@ -138,12 +138,12 @@
 <wxs module="tools" lang="babel">
   function computClass (current,index,length) {
     var allclass = "";
-    if(current-1==index)
+    if(current==index)
       allclass='subleft';
-
-    if(current==index) allclass = "select";
-
-    if(current+1==index)
+    // 无限循环当current为最后一个的时候，select就应该是0 例如长度为10，当current为9时，select就应该是0
+    if(current+1==index || (current==length-1 && index==0) ) allclass = "select";
+    // 无限循环当current为最后一个/两个的时候的时候，例如长度为10，当current为8/9时，select就应该是1/0
+    if(current+2 == index|| (current>=length-2 && index==current-length+2))
      allclass='subright';
 
     return allclass;
@@ -183,18 +183,18 @@
         display-multiple-items="{{swiperItem}}"
         current="{{current}}"
         bindchange="moveSwiper"
-        previous-margin="120rpx" next-margin="90rpx"
+        bindanimationfinish="swipermoveDone"
+        circular="{{circular}}"
+        next-margin="90rpx"
         catch:touchmove
       >
-        <swiper-item></swiper-item>
         <swiper-item wx:for="{{list}}" wx:key="index">
           <view
             data-itemid="{{index}}"
             bindtap="toViewPage"
-            bindlongpress="longTap"
             bindtouchstart="touchStart"
             bindtouchend="touchEnd"
-            class="list-item {{item.select?'delete':''}} {{tools.computClass(current,index,list.length)}}"
+            class="list-item {{item.select?'delete':''}} {{tools.computClass(currentIndex,index,list.length)}}"
           >
             <image src="/static/images/test2.png"  mode="widthFix"></image>
             <view class="text">{{item.text}}</view>
@@ -203,7 +203,6 @@
             </view>
           </view>
         </swiper-item>
-        <swiper-item></swiper-item>
       </swiper>
     </view>
   </view>
@@ -211,7 +210,6 @@
 
 <script>
   let touchDotX = 0, touchDotY = 0;
-  let startPositionX,startPositionY;
   import wepy from '@wepy/core';
   import store from '../store';
   wepy.page({
@@ -223,10 +221,14 @@
     data: {
       list:[],
       adlist:[],
-      current:2,
+      current:5,
       userInfo: {},
       swiperItem:3,
       videoList:[],
+      circular:false,
+      topPage:0,
+      lastPage:0,
+      currentIndex:5,
     },
 
     computed: {
@@ -235,13 +237,68 @@
 
     methods: {
       moveSwiper(e){
-        if(e.$wx.detail.source === 'touch') {
-          this.current = e.$wx.detail.current;
+        if(e.$wx.detail.source == 'touch') {
+          let current = e.$wx.detail.current;
+          this.currentIndex = current;
+        }
+      },
+      swipermoveDone(e){
+        if(e.$wx.detail.source == 'touch') {
+          let current = e.$wx.detail.current;
+          let totalPage = 3;
+          let newlist = [
+//            {value:1,text:'这是测试的文字-1'},
+//            {value:2,text:'这是测试的文字-2'},
+//            {value:3,text:'这是测试的文字-3'},
+//            {value:4,text:'这是测试的文字-4'},
+            {value:5,text:'这是测试的文字-5'},
+          ];
+          let nextlist=[
+            {value:11,text:'这是测试的文字11'},
+            {value:12,text:'这是测试的文字12'},
+            {value:13,text:'这是测试的文字13'},
+            {value:14,text:'这是测试的文字14'},
+            {value:15,text:'这是测试的文字15'},
+          ];
+          let that = this;
+          function debounce(func,wait) {
+            let timeout;
+            return function () {
+              if (timeout) clearTimeout(timeout);
+
+              let callNow = !timeout;
+              timeout = setTimeout(func, wait)
+
+              if (callNow) func();
+            }
+          }
+          console.log(current,this.list.length,222);
+          if(current <= 2) {
+            debounce(setTimeout(function(){
+              that.topPage +=1;
+              if(that.lastPage+that.topPage >= totalPage) {
+                that.circular = true;
+                return;
+              }
+              that.list = [...newlist, ...that.list];
+//              that.current = current+1;
+//              that.currentIndex = current+1;
+            },1000),500);
+          }
+          if(current >= this.list.length-3) {
+            debounce(setTimeout(function(){
+              that.lastPage +=1;
+              if(that.lastPage+that.topPage >= totalPage) {
+                that.circular = true;
+                return;
+              }
+              that.list = [ ...that.list,...nextlist];
+            },1000),500)
+          }
         }
       },
       toViewPage() {
         //解决长按触发tap事件的bug
-        if(this.islongTap) {this.islongTap =false; return;}
         wx.navigateTo({
           url: '/pages/auth'
         })
@@ -254,7 +311,6 @@
       },
       // 移动结束处理动画
       touchEnd(event) {
-        // console.log(event.currentTarget.dataset,2)
         // 手指离开屏幕时记录的坐标
         let touchMoveX = event.changedTouches[0].pageX;
         let touchMoveY = event.changedTouches[0].pageY;
@@ -262,8 +318,6 @@
         // 起始点的坐标(x0,y0)和手指离开时的坐标(x1,y1)之差
         let tmX = touchMoveX - touchDotX;
         let tmY = touchMoveY - touchDotY;
-        //console.log(touchMoveX,touchMoveY,'touch')
-        //console.log(this.shopcarPosition
         // 两点横纵坐标差的绝对值
         let absX = Math.abs(tmX);
         let absY = Math.abs(tmY);
@@ -278,7 +332,6 @@
             if (tmY < 0) {
               this.deleteAnimation(current);
               // console.log("上滑=====");
-              // 执行左滑动画
               // 如更tmX>0，即(离开点的X)-(起始点X)大于0 ，判定为上滑
             } else {
               // console.log("下滑=====");
@@ -298,7 +351,6 @@
               url:'https://xyqblogo.lkbang.net/VID_20200508_171710.mp4'
             };
             that.videoList = [obj];
-//            that.$apply();
           },1000)
 
         }
@@ -345,16 +397,16 @@
         });
       }
       this.list = [
-        {value:1,text:'这是测试的文字1',selectItemStyle:''},
-        {value:2,text:'这是测试的文字2',selectItemStyle:''},
-        {value:3,text:'这是测试的文字3',selectItemStyle:''},
-        {value:4,text:'这是测试的文字4',selectItemStyle:''},
-        {value:5,text:'这是测试的文字5',selectItemStyle:''},
-        {value:6,text:'这是测试的文字6',selectItemStyle:''},
-        {value:7,text:'这是测试的文字7',selectItemStyle:''},
-        {value:8,text:'这是测试的文字8',selectItemStyle:''},
-        {value:9,text:'这是测试的文字9',selectItemStyle:''},
-        {value:10,text:'这是测试的文字10',selectItemStyle:''},
+        {value:1,text:'这是测试的文字1'},
+        {value:2,text:'这是测试的文字2'},
+        {value:3,text:'这是测试的文字3'},
+        {value:4,text:'这是测试的文字4'},
+        {value:5,text:'这是测试的文字5'},
+        {value:6,text:'这是测试的文字6'},
+        {value:7,text:'这是测试的文字7'},
+        {value:8,text:'这是测试的文字8'},
+        {value:9,text:'这是测试的文字9'},
+        {value:10,text:'这是测试的文字10'},
       ];
       this.adlist = [
         {imgsrc:'/static/images/test1.jpg',text:'小明刚刚参与了抽奖'},